wx 小程序动画让图片一直匀速旋转

最新推荐文章于 2024-05-13 16:42:46 发布

Answer_Ming

最新推荐文章于 2024-05-13 16:42:46 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js web 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/ZMM_Devil/article/details/108648085

前端同时被 3 个专栏收录

31 篇文章

订阅专栏

web

31 篇文章

订阅专栏

26 篇文章

订阅专栏

本文介绍了一个使用微信小程序 API 实现的图片自动旋转效果。通过创建动画实例并设置动画参数，可以使得图片按照指定的角度和时间间隔进行旋转。此外，还介绍了如何通过定时器控制动画的连续播放，并提供了停止旋转的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div>
            <image animation="{{animationData}}" src="http://school-hi.oss-cn-shanghai.aliyuncs.com/markettest/1600330381592_453.png?Expires=1631866382&OSSAccessKeyId=LTAInVG6zkrEMhpe&Signature=p88AO31rMAKPn%2Fr0xyLicsZIWjo%3D" />
</div>

data: {
            rotateIndex: 1,
            animationData: {}
        },
        ready() {
            // 创建动画
            var animation = wx.createAnimation({
                duration: 1000,
                timingFunction: "linear"
            })
            this.animation = animation
            // 执行旋转或者点击图片旋转(如果你想要点击就在图片上添加点击事件我默认是添加的)
            this.refreshList()
        },
        methods: {
            /**
             * 动画
             */
            refreshList() {
                this.timeInterval = setInterval(function () {
                      this.rotateIndex = this.rotateIndex+1;
                      this.animation.rotate(180 * (this.rotateIndex-1)).step()
                      this.animationData = this.animation.export()

                }.bind(this), 1000)
                // 请求API接口或者别的操作
                this.request()
            },
            // 停止旋转
            stopRefresh() {
                if (this.timeInterval > 0) {
                    clearInterval(this.timeInterval)
                    this.timeInterval = 0
                }
            },

        }