CSS 动画库 animation-box

使用

import { AnimationBox } from '@activity-maker/animation-box';

<AnimationBox
  type="rotate-center"
  delay={0}
  direction="normal"
  duration={1}
  iterationCount={1}
  loop={false}
>
  <div
    style={{
      width: 200;
      height: 200;
      background: '#ccc';
    }}
  ></div>
</AnimationBox>;

type 代表了不同的动画效果，具体的参数可选值及组合效果可见：http://commercial-activity-maker.pages.xmly.work/animation-box

实现原理

animation-box 内部利用 styled-components 对 css 动画进行了包装。CSS 动画来自于 Animista 网站。将 css 的 animation 各项子属性作为 react 组件的 props 传入，从而可以灵活控制动画。

自定义样式

如果库中内置的动画类型不符合需求，可联系开发者添加。或者使用自定义样式 customStyle。customStyle 接收一个 css 样式字符串，具有最高的优先级，如果和已有的属性冲突，会将其覆盖。

<AnimationBox
  type="rotate-center"
  direction="normal"
  duration={1}
  iterationCount={1}
  loop={false}
  customStyle={`
  	@keyframes shadow-drop-center {
    	0% {
      	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    	}
    	100% {
      	box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
    	}
  	}
  	animation-name: shadow-drop-center;
  `}
>

上面的代码中定义了一个新的 keyframe，然后用 animation-name 来指定使用它。或者可以使用简写：animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;。注意：使用简写形式会覆盖设置的其它属性值。

发布流程

• yarn publish: 输入要发布的版本号后，构建并发布至 xnpm
• git push --follow-tags: 推送代码及标签