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