<template>
<view class="bg">
<view class="wnd" :animation="animationData" ></view>
</view>
</template>
<!-- 本DEMO的功能是在页面显示一秒后让wnd小方块通过动画下移200像素 ，
经过测试，组合式API中所有的代码都正常运行，但动画效果没有。
选项式API则没有问题-->
<!--选项式API可以实现功能 <script>
export default{
data() {
return {
animationData: {}
}
},
onShow: function(){
var animation = uni.createAnimation({
duration: 1000
});
setTimeout( () =>{
animation.translateY(200).step()
this.animationData = animation.export()
}, 1000) ;
}
}
</script> -->
<!-- 组合式API无法实现功能 -->
<script setup>
import { onShow } from "@dcloudio/uni-app"
import { reactive, ref } from "vue"
let animationData = reactive({});
onShow(() =>{
var animation = uni.createAnimation({
duration: 1000
});
setTimeout( () =>{
animation.translateY(200).step()
animationData = animation.export()
}, 1000) ;
});
</script>
<style scoped>
.bg{
width: 100%;
height:2000rpx;
background-color: black;
}
.wnd{
position: relative;
background-color: red;
width: 200rpx;
height:200rpx;
left: 50%;
top: 20%;
}
</style>
g***@163.com
- 发布：2023-07-07 18:55
- 更新：2023-07-08 18:16
- 阅读：284
爱豆豆 - 办法总比困难多
直接绑定 不需要单独赋值 你运行看一下 是可以实现动画效果的
<template>
<view class="bg">
<view class="wnd" :animation="animation" ></view>
</view>
</template>
<script setup>
import { onShow } from "@dcloudio/uni-app"
import { reactive, ref } from "vue"
let animation = ref();
onShow(() =>{
animation.value = uni.createAnimation({
duration: 1000
});
setTimeout( () =>{
animation.value.translateY(200).step()
}, 1000) ;
});
</script>
<style scoped>
.bg{
width: 100%;
height:2000rpx;
background-color: black;
}
.wnd{
position: relative;
background-color: red;
width: 200rpx;
height:200rpx;
left: 50%;
top: 20%;
}
</style> 
g***@163.com (作者)
感谢解答，这样的确可以，还是不太明白导出后不起作用的原因。
2023-07-09 10:34
爱豆豆
回复 g@163.com: 回复 g@163.com: 你上面的代码片段少写了一步
你仔细看文档 https://uniapp.dcloud.net.cn/api/ui/animation.html#createanimation
onShow(() =>{
var animation = uni.createAnimation({
duration: 1000
});
animationData = animation
setTimeout( () =>{
animation.translateY(200).step()
animationData = animation.export()
}, 1000) ;
});
2023-07-10 09:54
爱豆豆
回复 g***@163.com: 按照文档写法可以生效的
2023-07-10 09:54