Skip to content

convert keyframes code to animation, use keyframes in rax. 使用 CSS 3 中的 keyframes 语法来写 rax 动画

Notifications You must be signed in to change notification settings

Gaohaoyang/rax-keyframes-to-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Keyframes to Animation in Rax

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

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

Demo

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.

About

convert keyframes code to animation, use keyframes in rax. 使用 CSS 3 中的 keyframes 语法来写 rax 动画

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published