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

本文介绍了一个使用微信小程序 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>

js

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
                }
            },

        }

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值