问题表现:left()、right()、top()、bottom()动画执行时并没有出现运动效果,并且连delay也没有生效,物体会不经动画过程直接出现在目标位置上,但是使用rotate()进行旋转动画时却有动画效果。
是我写的有问题还是这是个BUG?
测试源码:
前端代码
<view class='div' bindtap='DivTap' animation="{{MyAnimation}}">view>
CCS代码
/* index/index.wxss */
.div{
width: 100px;
height: 100px;
background: red;
position: relative;
}
JS代码
// index/index.js
Page({
data: {
MyAnimation:[]
},
onLoad: function(options) {
this.MyAnimation = wx.createAnimation({
duration: 2000,
timingFunction: 'linear',
delay: 2000,
transformOrigin: '50% 50% 0'
});
},
DivTap: function() {
this.MyAnimation.left(100).step()
this.setData({
MyAnimation:this.MyAnimation.export()
})
console.log(this.MyAnimation);
}
})
需要调用setTimeout 等延迟重新setData一次才可显示
动画不是没显示,是没有动画过程,请仔细读题
我的意思就是这个问题
我试了一下不行,能贴一下您的写法吗?
initAnimation () {
let animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
return animation
},
getAnimation(animation, width, time = 0, duration = 1000) {
setTimeout(() => {
animation.width(width).step({duration: duration})
this.setData({
animationData: animation.export()
})
}, time)
},
之前的写的,主要是加了延迟setData, 你可以参考下
我试了一下您的这个写法,变宽度高度角度都行,但是left()、right()、top()、bottom()还是不行
1、wxml
2、wxss
3、js
想问一下,似乎没有 css3 的过度效果,怎么回事呀? 还望解答一二
小哥哥帮看下 https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=1289114753&docid=0000a450460ce0b371374cb0251000
如果是希望左右上下移动 问什么不考虑 translate
animation.translateX(-100).step();
能来个代码片段吗?
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
使用absolute也不行,和relative同样的效果
建议调整一下布局,使用 position: absolute 来实现动画。
我的问题怎么样了?