uni中requestAnimationFrame的使用

<template>
</template>

<script module="animate" lang="renderjs">

	export default {
		methods: {
			animate(){
				// 动画...


				requestAnimationFrame(() => {
					this.animate()
				})
			}
		}
	}
</script>

在官方示例(hello uniapp)里面,组件目录下的canvas.vue里面有用到,详细可以去看看

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app使用requestAnimationFrame可以通过uni.createSelectorQuery()来获取页面元素的高度和位置信息,然后使用requestAnimationFrame来实现动画效果。 具体步骤如下: 1. 在需要使用requestAnimationFrame的页面,引入uni.createSelectorQuery()方法。 2. 使用uni.createSelectorQuery()方法获取需要进行动画操作的页面元素的高度和位置信息。 3. 在获取到元素信息后,使用requestAnimationFrame来实现动画效果。 例如,以下代码实现了一个简单的动画效果,当用户点击按钮时,页面元素会向上移动50像素: ``` <template> <view class="demo"> <view class="box" :style="{top:top + 'px'}"></view> <button @click="move">移动</button> </view> </template> <script> export default { data() { return { top: 0 } }, methods: { move() { uni.createSelectorQuery().select('.box').boundingClientRect(res => { let start = Date.now(), duration = 500, //动画持续时间 from = this.top, //起始位置 to = res.top - 50; //目标位置 function step() { let progress = Math.min(1, (Date.now() - start) / duration); this.top = from + (to - from) * progress; if (progress < 1) { requestAnimationFrame(step); } } requestAnimationFrame(step); }).exec(); } } } </script> ``` 在上面的代码,我们首先使用uni.createSelectorQuery()方法获取了页面class为box的元素的位置信息,然后在move()方法使用requestAnimationFrame来实现动画效果,具体实现可以参考step()函数的代码。 需要注意的是,在使用requestAnimationFrame时,我们需要根据动画持续时间来计算出每一帧动画的位置,这样才能实现平滑的过渡效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值