weex开发之动画实现方式的比较

1.css动画

简单的动画，比如改变宽高，位置等，可以使用css动画实现，但是需要注意css动画的兼容性比较差，会出现在ios和android上奇怪的表现不一致。详细使用方法见weex官网的相关文档。

使用方法：

<style scoped>
  .panel {
    margin: 10px;
    top:10px;
    align-items: center;
    justify-content: center;
    border: solid;
    border-radius: 10px;
    transition-property: width, height, background-color;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  }
</style>

2.animation模块和bindingX模块

所以大部分动画推荐使用animation或者bindingX来实现，这两种实现方式个人认为当只需要对一个元素实现动画时，使用animation模块语义更加简洁，当我们需要对多个元素执行动画时，使用bindingX可以使代码更加容易理解并且可维护性较高。

单个元素：

//animation
animation.transition(ref1, {
    styles: {
        transform: 'translate(250px, 100px)',
    },
    duration: 800, //ms
    timingFunction: 'ease',
    needLayout:false,
    delay: 0 //ms
    }, function () {
        modal.toast({ message: 'animation finished.' })
    })
//bindingX
  binding.bind(
            {
              eventType:'timing',
              exitExpression: parse(exit),
              props: [
                      {
                         element:card,
                         property:'transform.translateX',
                         expression:parse(translate_x_expression)
                      }
                    ]
            },function(e){
                // modal.alert({message:e.state})
            });             

多个元素：

//animation
animation.transition(ref1, {
    styles: {
        transform: 'translate(250px, 100px)',
    },
    duration: 800, //ms
    timingFunction: 'ease',
    needLayout:false,
    delay: 0 //ms
    }, function () {
        modal.toast({ message: 'animation finished.' })
    })
animation.transition(ref2, {
    styles: {
        transform: 'translate(250px, 100px)',
    },
    duration: 800, //ms
    timingFunction: 'ease',
    needLayout:false,
    delay: 0 //ms
    }, function () {
        modal.toast({ message: 'animation finished.' })
    })
animation.transition(ref3, {
    styles: {
        transform: 'translate(250px, 100px)',
    },
    duration: 800, //ms
    timingFunction: 'ease',
    needLayout:false,
    delay: 0 //ms
    }, function () {
        modal.toast({ message: 'animation finished.' })
    })
//bindingX
 binding.bind(
                    {
                        eventType:'timing',
                        exitExpression: parse(exit),
                        props: [
                            {
                                element:card1,
                                property:'transform.translateX',
                                expression:parse(translate_x_expression)
                            },
                            {
                                element:card2,
                                property:'transform.translateX',
                                expression:parse(translate_x_expression)
                            },
                            {
                                element:card3,
                                property:'transform.translateX',
                                expression:parse(translate_x_expression)
                            },
                        ]
                    },function(e){
                        // modal.alert({message:e.state})
                       
                    });

animation更多详细使用方法见weex官网的相关文档。

bindingX更多详细使用方法见bindingX官网的相关文档和我的博客BindingX在weex中使用。

我的weex相关博客：weex开发系列

我的开源weex模板项目：IWeex