Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gaohaoyang/rax-keyframes-to-animation
convert keyframes code to animation, use keyframes in rax. 使用 CSS 3 中的 keyframes 语法来写 rax 动画
https://github.com/gaohaoyang/rax-keyframes-to-animation
alibaba animation keyframes plugin rax weex
Last synced: 3 months ago
JSON representation
convert keyframes code to animation, use keyframes in rax. 使用 CSS 3 中的 keyframes 语法来写 rax 动画
- Host: GitHub
- URL: https://github.com/gaohaoyang/rax-keyframes-to-animation
- Owner: Gaohaoyang
- Created: 2018-03-20T09:27:52.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-27T12:45:45.000Z (about 6 years ago)
- Last Synced: 2024-11-10T11:43:31.870Z (3 months ago)
- Topics: alibaba, animation, keyframes, plugin, rax, weex
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 14
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
安装组件
``` bash
yarn add rax-keyframes-to-animation
```
或
``` bash
npm i rax-keyframes-to-animation -S
```
使用示例
``` jsx
// 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 (
{
this.box = ref;
}}
className="box"
>
hello
);
}
}
export default App;
```
``` css
/* 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](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.