收藏
回答

小程序 camrea组件上实现动画效果

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 需求 camrea 客户端 6.7.3 2.0.0

- 需求的场景描述(希望解决的问题)

在camera组件上 实现动画效果。类似于微信扫一扫中的扫描线。

具体问题:在打开摄像头后,页面会出现一串随机码,随机码需要增加 逐渐改变字体颜色的动画效果,在7s内结束。

我在微信开发者工具内实现了这个效果。但是真机上不行。


具体代码如下:

html:

<cover-view  class="code {{colorful}}">{{code}}</cover-view>


css如下::

.colorful{

/*渐变背景*/

background: -webkit-linear-gradient(left, white, #0f0);

color: transparent; /*文字填充色为透明*/

-webkit-text-fill-color: transparent;

-webkit-background-clip: text; /*背景剪裁为文字,只将文字显示为背景*/

background-size: 200% 100%; /*背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间*//* 动画 */

animation-iteration-count: 1; /*只循环一次*/

animation: masked-animation 7s infinite linear;

}

@keyframes masked-animation {

0% {

background-position: 0 0; /*background-position 属性设置背景图像的起始位置。*/

}

100% {

background-position: -100% 0;

}

}

- 希望提供的能力

有没有什么好的方法在真机上实现这个动画效果

最后一次编辑于  2018-12-21  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

1 个回答