动画

动画是每一个app不可或缺的能力，RN和微信小程序的动画实现差异很大，RN的动画能力要强于微信小程序，想要完全把RN的动画转化至微信小程序的是不可能的。为此我们封装了一套动画组件库，这一套动画组件库涵盖了所有微信小程序的动画能力，所有使用此动画库开发的动画，都可以无损转化到小程序端。

这套组件使用方式参考了小程序的动画，API和使用方式可以直接查看小程序的动画文档

createAnimation

创建一个动画对象

AnimatedView AnimatedImage AnimatedText

默认导出的动画组件

AnimationEnable

把任意组件转化为动画组件

import { AnimationEnable } from '@areslabs/wx-animated'
@AnimationEnable
export default class A extends React.Component {
    render() {
        //...
    }
}

或者

import { AnimationEnable } from '@areslabs/wx-animated'

class A extends React.Component {
    render() {
        //...
    }
}

export default AnimationEnable(A)

使用方式

参考了小程序动画的使用方式

默认动画组件

import {AnimatedView, createAnimation, AnimatedImage} from '@areslabs/wx-animated'
export default class A extends Component {
    state = {
        animationData: {},
    };

    handlePress = () => {
        var animation = createAnimation({
            duration: 2000,
            timingFunction: 'ease-in',
        })
        animation.translateY(50).translateX(50).rotate(180).step()
        this.setState({
            animationData: animation.export()
        })
    };
    render() {
        return (
            <View>
                <Button title="start HW animation"
                        onPress={this.handlePress}
                />
                <AnimatedView
                    animation={this.state.animationData}
                >
                    <Text>HW</Text>
                </AnimatedView>

                <AnimatedImage
                    style={{width: 50, height: 50}}
                    source={require('./ic_sold_out.png')}
                    animation={this.state.animationData}
                />
            </View>
        );
    }
}

自定义动画组件

声明自定义动画组件

import React from 'react'
import {View, Text} from 'react-native'
import { AnimationEnable } from '@areslabs/wx-animated'

@AnimationEnable
export default class MyAniComp extends React.Component {
    render() {
        return (
            <View style={[{height: 50, width: 50, backgroundColor: 'red'}, this.props.style]}>
                <Text>MyAniComp</Text>
            </View>
        )
    }
}

使用自定义动画组件

export default class A extends Component {
    state = {
        myAniComp: null
    };

    handleMyAniPress = () => {
        var animation = createAnimation({
            duration: 2000,
            timingFunction: 'ease',
        })

        animation.opacity(0).translateX(100).step()
        this.setState({
            myAniComp: animation.export()
        })
    }

    render() {
        return (
            <View>
                <Button title="start MyAniComp animation"
                        onPress={this.handleMyAniPress}
                />

                <MyAniComp
                    animation={this.state.myAniComp}
                />
            </View>
        );
    }
}