1、page入场动画可以在uni.navigateTo设置
uni.navigateTo({
url: '../test/test',
animationType: 'pop-in',
animationDuration: 200
});
uni.navigateBack({
delta: 1,
animationType: 'pop-out',
animationDuration: 200
});还可在navigator标签中使用<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator> <navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>11也能在pages.json中使用
"style": {
"app-plus": {
"animationType": "fade-in",
"animationDuration": 300
}
}
2、组件动画可以使用uni.createAnimation(OBJECT)实现
<view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view>
export default{
data() {
return {
animationData: {}
}
},
onShow: function(){
var animation = uni.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.scale(2,2).rotate(45).step()
this.animationData = animation.export()
setTimeout(function() {
animation.translate(30).step()
this.animationData = animation.export()
}.bind(this), 1000)
},
methods:{
rotateAndScale: function () {
// 旋转同时放大
this.animation.rotate(45).scale(2, 2).step()
this.animationData = this.animation.export()
},
rotateThenScale: function () {
// 先旋转后放大
this.animation.rotate(45).step()
this.animation.scale(2, 2).step()
this.animationData = this.animation.export()
},
rotateAndScaleThenTranslate: function () {
// 先旋转同时放大,然后平移
this.animation.rotate(45).scale(2, 2).step()
this.animation.translate(100, 100).step({ duration: 1000 })
this.animationData = this.animation.export()
}
}
}参考:https://uniapp.dcloud.net.cn/api/ui/animation.html
网友回复
有没有免费让ai自动帮你接管操作电脑的mcp服务?
mcp为啥用Streamable HTTP 替代 HTTP + SSE?
scratchjr有没有开源的前端html网页版本源代码?
多模态大模型能否根据ui交互视频来来模仿写出前端交互动画效果ui代码?
如何用阿里云oss+函数计算fc+事件总线EventBridge+消息队列+数据库+redis缓存打造一个高并发弹性系统?
阿里云函数计算 FC如何在海外节点搭建一个代理网络?
ai studio中gemini build的代码如何发布到github pages等免费网页托管上 ?
如何在cursor、qoder、trae中使用Claude Skills功能?
有没有不用u盘就能重装系统的开源工具?
python如何固定摄像头实时计算停车场停车位剩余数量?


