命理八字之观音求签灵签摇晃抽签动画的实现

最新推荐文章于 2024-05-10 20:23:45 发布

lsk9479

最新推荐文章于 2024-05-10 20:23:45 发布

阅读量491

点赞数 8

分类专栏：八字命理文章标签： uniapp动画 createAnimation animation 抽签动画

本文链接：https://blog.csdn.net/ktucms/article/details/138072289

版权

八字命理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Uniapp中利用createAnimation创建动画，强调了使用image绑定和动画数据应采用数组的原因，以及在实现过程中需要注意的两个关键点：HTML标签绑定限制和终端一致性。

摘要由CSDN通过智能技术生成

#小李子9479#

观音抽签uniapp动画实现，使用uniapp的createAnimation来创建一个animation动画对象，在这个对象里面写入动画的序列，详情见下面的代码，有几个点要注意。

1。使用image来绑定，不能使用div,img等html的标签来绑定动画

2。动画数据 animation的绑定，使用数组，因为uniapp可以很好的感知到数组的变化，而不太容易感知到变量的变化。这样可以实现在app,h5等各终端的动画起作用。

 onShow() {
        var that = this;
        that.animation = uni.createAnimation({
            duration: 50,
            transformOrigin: 'center bottom',//以底部中间为旋转点
            timingFunction: 'ease-in-out'
        });
    },

  et_tick: function () {
            var that = this;
            lsktl.audio.play("gyqq/sound.mp3");
            that.dhlist = [];
            for(var i=0;i<=10;i++){
                that.animation.rotate(-40).opacity(0.56).step().rotate(0).opacity(1).step().rotate(40).opacity(0.56).step().rotate(0).opacity(1).step();
            }
            var dhdata = that.animation;
            that.dhlist.push(dhdata.export());
            that.gdbox.total++;
        },