- 当前 Bug 的表现(可附上截图)
cover-image/cover-view transform:rotate 动画模拟器里正常,而真机表现不正常
用 keyframes、transition、wx.createAnimation 三种方式都有问题。
分别表现为:
keyframes 没有过渡动画效果,在 animation-duration 结束后直接从 0% 跳到 100%,没有中间动画过程;
transition 不能只围绕 z 轴转动,无论是只设置 rotate 还是 rotateZ,都会绕三轴一起转动。
wx.createAnimation 本质同上,效果也同上
- 预期表现
cover-image/cover-view transform:rotate 可以绕z轴平滑转动。
- 复现路径
https://developers.weixin.qq.com/s/3K1LAlma7z58
- 提供一个最简复现 Demo
可以实现,我花了半天的时间搞定了。
是怎么实现的呢?求指教~~
怎么做的,求指教?
onShow() {
let animation= wx.createAnimation({
duration:
2000
,
transformOrigin:
'50% 50% 0'
,
timingFunction:
'linear'
})
var
that =
this
;
let rotateCount =
0
this
.timer= setInterval(
function
() {
rotateCount+=
1
animation.rotate(
180
* rotateCount).step()
console.log(
"rotate:"
+ rotateCount)
that.setData({
animation: animation.export()
});
},
2000
)
},
<
view
>
<
cover-view
class
=
"cover"
>
<
cover-image
class
=
"rotateLogo"
src
=
"/image/logo.png"
animation
=
"{{animation}}"
> </
cover-image
>
</
cover-view
>
</
map
>
</
view
>
没人理?目前看下来,在真机上,没有任何办法让 cover-view / cover-image 的 rotate 正常动起来。大佬们看看呢
请问下 过渡动画问题解决了吗?我现在也遇到transition过渡真机无效的问题