项目作者: Gaohaoyang

项目描述 :
convert keyframes code to animation, use keyframes in rax. 使用 CSS 3 中的 keyframes 语法来写 rax 动画
高级语言: JavaScript
项目地址: git://github.com/Gaohaoyang/rax-keyframes-to-animation.git
创建时间: 2018-03-20T09:27:52Z
项目社区:https://github.com/Gaohaoyang/rax-keyframes-to-animation

开源协议:

下载


Keyframes to Animation in Rax



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

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

Demo

Usage

安装组件

  1. yarn add rax-keyframes-to-animation

  1. npm i rax-keyframes-to-animation -S

使用示例

  1. // App.js
  2. import { createElement, Component, render, findDOMNode } from 'rax';
  3. import View from 'rax-view';
  4. import Text from 'rax-text';
  5. import keyframesToAnimation from 'rax-keyframes-to-animation';
  6. import './App.css';
  7. const animationStr = `
  8. .element-animation{
  9. animation: tada linear 1s;
  10. animation-iteration-count: 2;
  11. transform-origin: 50% 50%;
  12. }
  13. `;
  14. const keyframesStr = `
  15. @keyframes tada{
  16. 0% {
  17. transform: rotate(0deg) scale(1.00);
  18. }
  19. 10% {
  20. transform: rotate(-3deg) scale(0.80);
  21. }
  22. 20% {
  23. transform: rotate(-3deg) scale(0.80);
  24. }
  25. 30% {
  26. transform: rotate(3deg) scale(1.20);
  27. }
  28. 40% {
  29. transform: rotate(-3deg) scale(1.20);
  30. }
  31. 50% {
  32. transform: rotate(3deg) scale(1.20);
  33. }
  34. 60% {
  35. transform: rotate(-3deg) scale(1.20);
  36. }
  37. 70% {
  38. transform: rotate(3deg) scale(1.20);
  39. }
  40. 80% {
  41. transform: rotate(-3deg) scale(1.20);
  42. }
  43. 90% {
  44. transform: rotate(3deg) scale(1.20);
  45. }
  46. 100% {
  47. transform: rotate(0deg) scale(1.20);
  48. }
  49. }
  50. `;
  51. class App extends Component {
  52. componentDidMount = () => {
  53. this.runAnimation();
  54. }
  55. runAnimation = () => {
  56. const box = findDOMNode(this.box); // 获取元素
  57. // 调用动画方法
  58. keyframesToAnimation(box, animationStr, keyframesStr, () => {
  59. console.log('animation end');
  60. });
  61. }
  62. render() {
  63. return (
  64. <View className="container">
  65. <View
  66. ref={(ref) => {
  67. this.box = ref;
  68. }}
  69. className="box"
  70. >
  71. <Text className="boxText">hello</Text>
  72. </View>
  73. </View>
  74. );
  75. }
  76. }
  77. export default App;
  1. /* App.css */
  2. .container {
  3. position: fixed;
  4. top: 0;
  5. left: 0;
  6. right: 0;
  7. bottom: 0;
  8. justify-content: flex-start;
  9. align-items: flex-start;
  10. }
  11. .box {
  12. width: 100;
  13. height: 100;
  14. margin-left: 160;
  15. margin-top: 300;
  16. background-color: #5c8fdb;
  17. border-radius: 10;
  18. justify-content: center;
  19. align-items: center;
  20. }
  21. .boxText {
  22. color: #fff;
  23. font-size: 30;
  24. }

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.