vue文件示例

[hphua]

<template>
    <div class="circle" :style="circleStyle">
        <div class="left-wrap" :style="leftwrapStyle">
            <div class="loader" ref="id1" :style="leftwrapLoaderStyle"></div>
        </div>
        <div class="right-wrap" :style="rightwrapStyle">
            <div class="loader" ref="id2"  :style="rightwrapLoaderStyle"></div>
        </div>
        <div class="inner-circle" :style="innercircleStyle">
            <Text :style="innercircleTextStyle">{{percent}}%</Text>
        </div>
    </div>
</template>

<script>
    var animation = weex.requireModule('animation')
    export default {
//        data() {
//            return {
//                radius: 100,
//                color: '#1ba1e2',
//
//                borderWidth: 2,
//                percent: 60,
//                textColor: '#000',
//            }
//        },
        props: {
            radius : {
                type   : Number,
                default: 100
            },
            color: {
                type   : String,
                default: '#1ba1e2'
            },
            borderWidth : {
                type   : Number,
                default: 2
            },
            percent : {
                type   : Number,
                default: 60
            },
            textColor : {
                type   : String,
                default: '#000'
            },
        },

        methods: {
            anim: function(targte,styles, timingFunction, duration, callback) {
                //debugger;
                let el = this.$refs[targte];
                animation.transition( el, {
                    styles: styles,
                    timingFunction: timingFunction,
                    duration: duration
                }, callback)
            },

        },
        computed:{
            circleStyle:function () {
                return {'width':this.radius*2,'height':this.radius*2, 'border-radius':this.radius+'px'};
            },
            leftwrapStyle:function () {
                return {'width':this.radius,'height':this.radius*2,'left':0};
            },
            leftwrapLoaderStyle:function () {
                return {'left':this.radius,'width':this.radius,'height':this.radius*2,'border-top-left-radius':0+'px','border-bottom-left-radius':0+'px','background-color':this.color};
            },
            rightwrapStyle:function () {
                return {'width':this.radius,'height':this.radius*2,'left':this.radius};
            },
            rightwrapLoaderStyle:function () {
                return {'left':(this.radius*-1),'width':this.radius,'height':this.radius*2,'border-top-right-radius':0+'px','border-bottom-right-radius':0+'px','background-color':this.color};
            },
            innercircleStyle:function () {
                return {'width':(this.radius - this.borderWidth)*2,'height':(this.radius - this.borderWidth)*2,'border-radius':(this.radius - this.borderWidth)+'px','background-color':'#fff'};
            },
            innercircleTextStyle:function () {
                return {'color':this.textColor};
            }
        },
        mounted() {
            let leftTransformerDegree = '0';//deg
            let rightTransformerDegree = '0';
            if(this.percent >= 50) {
                rightTransformerDegree = '180deg';
                leftTransformerDegree = (this.percent-50)*3.6;
            }else {
                rightTransformerDegree = this.percent * 3.6;
            }

            var self = this;
            self.anim('id1',{
                transform: 'rotate('+ leftTransformerDegree +')',
                transformOrigin: '0% 50%' ,
            }, 'ease-in-out', 100, function() {
            });
            self.anim('id2',{
                transform: 'rotate('+ rightTransformerDegree +')',
                transformOrigin: '100% 50%',
            }, 'ease-in-out', 100, function() {
            });
            if(this.borderWidth<=2) {
                this.borderWidth = 2;
            }

        }

    }
</script>

<style>
    .circle{
        overflow: hidden;
        position: relative;
        justify-content: center;
        align-items: center;
        background-color:#e3e3e3;
    }
    .left-wrap{
        overflow: hidden;
        position: absolute;
        top:0;
    }
    .right-wrap {
        overflow: hidden;
        position: absolute;
        top:0;
    }

    /**border-radius改为0*/
    .loader{
        position:absolute;
        left:0;
        top:0;
        border-radius:0;
    }
    .loader2{
        position:absolute;
        left:0;
        top:0;
        border-radius:1000;
    }

    .inner-circle {
        position: relative;
        justify-content: center;
        align-items: center;
    }
    .text {
        font-size: 11;
        color: #888;
    }
</style>

存在问题： 1、用Playground预览，Android正常，iOS示意不对。如下图：

2、同样是用Playground预览，Android系统下，连续操作多次页面刷新（有间隔）。UI 动画会有明显抖动。初步分析，可能是animation存在缺陷。

[dourgulf]

原库的.we是什么后缀名啊？