小程序 · Animation——淡入淡出动画效果

淡入淡出动画效果

主要原理是通过控制透明度显示。

WXML

 <!-- 加入居民提示 --><view class="add-tip" animation="{{animationData}}" wx:if="{{addList.length>0}}"><view class="add-left-icon"><image class="" src="{{addCurrent.avatar}}" mode="scaleToFill" /></view><text>{{addCurrent.desc}}</text></view>

var Interval;
Page({data: {animationData: {},addList: [// { content: '3分钟前张**加入了本网格' }, { content: '2分钟前张**加入了本网格' }, { content: '1分钟前张**加入了本网格' }],addCurrent: {},addNum: 0,isShow: false,isMask: false,},onLoad: function() {},// 首页数据getData() {let that = this// 数据重新加载时需要清除定时器 不清除的话会出现闪现速度变快clearInterval(Interval)Interval = setInterval(function () {that.animateFn()}, 6000)},// 加入居民渐入渐出动画animateFn() {var animation = wx.createAnimation({//持续时间1000msduration: 1000,timingFunction: 'ease',})// this.animation = animationsetTimeout(function () {animation.opacity(1).step()this.setData({// isShow: true,animationData: animation.export(),})}.bind(this),500)setTimeout(function () {animation.opacity(0).step()this.setData({animationData: animation.export(),})}.bind(this),4000)setTimeout(() => {var num = this.data.addNumif (this.data.addNum == this.data.addList.length - 1) {num = 0} else {num++}var add = this.data.addList[num]this.setData({addNum: num,addCurrent: add,})}, 5000)},
})

WXSS
// less

  .add-tip {// width: 500rpx;padding-right: 15rpx;height: 50rpx;line-height: 50rpx;background: RGBA(27, 58, 98, 1);border-radius: 24rpx;opacity: 0;position: absolute;top: 10rpx;left: 24rpx;.add-left-icon {width: 32rpx;height: 32rpx;border: 1px solid #c7c7c7;border-radius: 50%;margin: 3px 14rpx 0;float: left;overflow: hidden;image {width: 100%;height: 100%;float: left;}}text {max-width: 420rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 26rpx;font-weight: 400;color: #ffffff;float: left;}}

参考：
界面 /动画 /wx.createAnimation

小程序 · Animation——淡入淡出动画效果相关推荐

[微信小程序]物流信息样式加动画效果(源代码附效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图片:(信息仅为示例)  ...
微信小程序加载中动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
android淡入淡出动画循环,Android应用开发之淡入淡出、缩放、旋转、平移、组合动画效果代码实现...
本文将带你了解Android应用开发Android动画开发之淡入淡出.缩放.旋转.平移.组合动画效果代码实现,希望本文对大家学Android有所帮助. 1.activity_main.xml文件 an ...
让云朵飘，微信小程序animation循环动画
微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好 ...
Android开发笔记（十五）淡入淡出动画TransitionDrawable
说到淡入淡出动画,可能大家会想到补间动画里面的AlphaAnimation,不过这个深浅动画只能对透明度做渐变效果,也就是只能对一个图形做深浅的颜色变换.如果我们想要从A图片逐渐变为B图片,也就是要实 ...
Android App开发动画特效中帧动画和电影淡入淡出动画的讲解及实战（附源码和演示视频简单易懂）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.帧动画 Android的动画分为三类,帧动画,补间动画和属性动画.其中帧动画是实现原理最简单的一种,跟现实生活中的电影胶卷类似,都是在短时间内连续 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
java小程序：控制台字符动画
java小程序:控制台字符动画说在前面程序效果代码呈现说在前面大一软件工程在读,java萌新一只,第一次写博客,技术很菜勿喷.如有错误欢迎指出! 这个小程序是给朋友的生日礼物,耗时半天,实际 ...
android淡入淡出动画_在Android中淡入动画示例
android淡入淡出动画 1) XML File: activity_main 1)XML文件:activity_main <?xml version="1.0" enco ...

小程序 · Animation——淡入淡出动画效果

淡入淡出动画效果

小程序 · Animation——淡入淡出动画效果相关推荐

最新文章

热门文章