convert keyframes code to anim

Keyframes to Animation in Rax

在 rax 中使用 CSS3 中的 @keyframes 语法来写 rax/weex 动画。

使用 keyframes 语法提供更友好的编程体验 weex 端使用 @weex-module/animation 执行动画 web 端直接使用 webView 层执行 CSS3 keyframes 动画 Demo

web 版

https://gaohaoyang.github.io/rax-keyframes-to-animation/demo/

weex 版（请使用具有 weex 环境的 app 扫码预览，如手淘）:

https://gaohaoyang.github.io/rax-keyframes-to-animation/demo/bundle.min.js?_wx_tpl=https://gaohaoyang.github.io/rax-keyframes-to-animation/demo/bundle.min.js Usage

安装组件

yarn add rax-keyframes-to-animation

或

npm i rax-keyframes-to-animation -S

使用示例

// App.js import { createElement, Component, render, findDOMNode } from 'rax'; import View from 'rax-view'; import Text from 'rax-text'; import keyframesToAnimation from 'rax-keyframes-to-animation'; import './App.css'; const animationStr = ` .element-animation{ animation: tada linear 1s; animation-iteration-count: 2; transform-origin: 50% 50%; } `; const keyframesStr = ` @keyframes tada{ 0% { transform: rotate(0deg) scale(1.00); } 10% { transform: rotate(-3deg) scale(0.80); } 20% { transform: rotate(-3deg) scale(0.80); } 30% { transform: rotate(3deg) scale(1.20); } 40% { transform: rotate(-3deg) scale(1.20); } 50% { transform: rotate(3deg) scale(1.20); } 60% { transform: rotate(-3deg) scale(1.20); } 70% { transform: rotate(3deg) scale(1.20); } 80% { transform: rotate(-3deg) scale(1.20); } 90% { transform: rotate(3deg) scale(1.20); } 100% { transform: rotate(0deg) scale(1.20); } } `; class App extends Component { componentDidMount = () => { this.runAnimation(); } runAnimation = () => { const box = findDOMNode(this.box); // 获取元素 // 调用动画方法 keyframesToAnimation(box, animationStr, keyframesStr, () => { console.log('animation end'); }); } render() { return ( <View className="container"> <View ref={(ref) => { this.box = ref; }} className="box" > <Text className="boxText">hello</Text> </View> </View> ); } } export default App;

/* App.css */ .container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: flex-start; align-items: flex-start; } .box { width: 100; height: 100; margin-left: 160; margin-top: 300; background-color: #5c8fdb; border-radius: 10; justify-content: center; align-items: center; } .boxText { color: #fff; font-size: 30; } Api keyframesToAnimation(node, animationStr, keyframesStr, callback)

功能：用于执行动画

参数：

node

dom 节点

animationStr

animation CSS 代码字符串，注意 animation name 要与 keyframes 中的 name 对应

keyframesStr

keyframes CSS 代码字符串，注意 keyframes name 要与 animation 中的 name 对应

callback

回调函数，注意当 animation-iteration-count 值为 infinite 时，回调函数永远不会执行

原理

首先将输入的 animationStr 和 keyframesStr 进行解析。

weex 中使用 @weex-module/animation 进行动画调用，使用递归的方式执行每一个关键帧的样式。

web 中直接将 keyframesStr 直接插入到样式表中，在 dom 元素上修改 animation 属性进行动画。

Contribute

开源项目，欢迎使用，欢迎找 bug，欢迎贡献代码~

https://github.com/Gaohaoyang/rax-keyframes-to-animation

yarn

Install all dependencies.

yarn run start

Runs the app in development mode.

Open http://localhost:9999 to view it in the browser.

The page will reload if you make edits.

yarn run lint

You will see the lint errors in the console.

yarn run build-demo

build demo.