对于cover-image 设置动画, 无论是直接写@keyframes还是使用API  wx.createAnimation,只要使用了opacity并且设置数值不为1,则在IOS小程序真机上该动画不会显示, 在安卓和模拟机上都是好的。

   文档上cover-image是支持opacity的



使用API ——wx.createAnimation:

var loveAnimation = wx.createAnimation({

   duration: 3000,

   timingFunction: 'linear',

});

this.loveAnimation = loveAnimation;



this.loveAnimation.translate(0, -60).opacity(0.5).step({ duration: 1000 })

this.setData({

loveUpData: this.loveAnimation.export()

})


使用wxss直接定义keyframes:


.love-icon{

   position: absolute;

   z-index: 100;

   bottom: 240rpx;

   right: 90rpx;

   width: 44rpx;

   height: 42rpx;

}


.love-icon.right{

   animation: love-right-up 1s linear 0s infinite;    

}


.love-icon.left{

   animation: love-left-up 1s linear 0.5s infinite;    

}


@keyframes love-right-up{

   0%{

       transform: translate(25rpx, 0);

       opacity: 1;

   }

   50%{

       transform: translate(50rpx, -63rpx);

       opacity: 1;

   }

   100%{

       transform: translate(25rpx, -126rpx);

       opacity: 0.5;

   }

}



以上代码在安卓机和模拟器上都是可以正常运行的,但是在IOS小程序真机上,只要加了opacity,动画就失效,直接不会出现改动画。




展开全部
收起
3回答
提交回答
  • 至过去的我

    2044人对此回答表示赞同

    我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多>
    发布于
  • 黎明星晨

    12人对此回答表示赞同

    给个用例看下。点击态是默认用的,这块我们优化下

    展开
    12
    0回复
    发布于 6年前

    评论(0)

    收起评论

  • Kenneth

    3人对此回答表示赞同

    案例就是问题中贴上的代码,cover-image是直接不见了。

    展开
    3
    0回复
    发布于 6年前

    评论(0)

    收起评论

  • William

    2人对此回答表示赞同

    我这边同样遇到这个问题,cover-imageopacity直接图片不见了。并且不知道为什么cover-image的长按灰色态无法关闭。

    展开
    2
    0回复
    发布于 6年前

    评论(0)

    收起评论

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部