微信小程序模拟ppt效果的公司介绍分步骤流程(主要使用Animation)。使用时间轴介绍以及swiper

思路：

参考抖音上滑下滑翻页实现介绍。
封装watch方法监听翻页并分步骤进入动画。
使用左滑右滑、渐变、计数、文本框打字输入动画。

Step1：

上滑下滑
//wxml
<view class="container container-fill"><view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend" style="transform:translateY(-{{scrollindex*100}}%);margin-top: {{margintop}}px"><view class="section section01 {{scrollindex==0?'active':''}}" style="background: #3399FF;"><text class="section-maintitle">页面1</text><text class="section-subtitle">我的页面”1</text></view><view class="section section02 {{scrollindex==1?'active':''}}" style="background: #00CC66;"><text class="section-maintitle">页面2</text><text class="section-subtitle">我的页面”2</text></view><view class="section section03 {{scrollindex==2?'active':''}}" style="background: #33CCCC;"><text class="section-maintitle">页面3</text><text class="section-subtitle">我的页面”3</text></view><view class="section section04 {{scrollindex==3?'active':''}}" style="background: #6699FF;"><text class="section-maintitle">页面4</text><text class="section-subtitle">我的页面”4</text></view><view class="section section05 {{scrollindex==4?'active':''}}" style="background: #9966FF;"><text class="section-maintitle">无缝对接双创服5</text><text class="section-subtitle">我的页面”5</text></view></view>
</view>
//js
Page({data: {scrollindex:0, //当前页面的索引值totalnum:5, //总共页面数starty:0, //开始的位置xendy:0, //结束的位置ycritical: 100, //触发翻页的临界值margintop:0, //滑动下拉距离},onLoad: function () {},scrollTouchstart:function(e){let py = e.touches[0].pageY;this.setData({starty: py})},scrollTouchmove:function(e){let py = e.touches[0].pageY;let d = this.data;this.setData({endy: py,})//400判断翻页的边界if(py-d.starty<400 && py-d.starty>-400){  this.setData({margintop: py - d.starty})}},scrollTouchend:function(e){let d = this.data;if(d.endy-d.starty >400 && d.scrollindex>0){this.setData({scrollindex: d.scrollindex-1})}else if(d.endy-d.starty <-400 && d.scrollindex<this.data.totalnum-1){this.setData({scrollindex: d.scrollindex+1})}this.setData({starty:0,endy:0,margintop:0})},
})
//css
.container-fill{height: 100%;overflow: hidden;
}
.scroll-fullpage{height: 100vh;transition: all 0.3s;
}
.section{height: 100vh;
}
.section-maintitle{display: block;text-align: center;font-size: 50rpx;color: #fff;font-weight: bold;letter-spacing: 10rpx;padding-top: 140rpx;
}
.section-subtitle{display: block;text-align: center;font-size: 40rpx;color: #fff;font-weight: bold;letter-spacing: 10rpx;
}
.active .section-maintitle,
.active .section-subtitle{animation: mymove 0.8s;
}
@keyframes mymove{from {transform: translateY(-400rpx) scale(0.5) rotateY(90deg);}to {transform: translateY(0) scale(1) rotateY(0);}
}

Step2

//封装watch方法
function observe(obj, key, watchFun, deep, page) {let val = obj[key];if (val != null && typeof val === "object" && deep) {Object.keys(val).forEach((item) => {observe(val, item, watchFun, deep, page);});}Object.defineProperty(obj, key, {configurable: true,enumerable: true,set: function(value) {watchFun.call(page, value, val);val = value;if (deep) {observe(obj, key, watchFun, deep, page);}},get: function() {return val;}});
}export function setWatcher(page) {let data = page.data;let watch = page.watch;Object.keys(watch).forEach((item) => {let targetData = data;let keys = item.split(".");for (let i = 0; i < keys.length - 1; i++) {targetData = targetData[keys[i]];}let targetKey = keys[keys.length - 1];let watchFun = watch[item].handler || watch[item];let deep = watch[item].deep;observe(targetData, targetKey, watchFun, deep, page);});
}

Step3

//监听翻页，以此触发动画特效
import * as watch from "../../utils/watch.js";watch:{scrollindex:function(newval,oldval){console.log(newval); // name改变时，调用该方法输出新值。if(newval===0){//第一页this.textpage()} else if (newval === 1){}}},

css3动画

// 不需要动作的动画使用css3动画：
/* 渐变-背景图 */@keyframes menuAwave {0% {opacity: 0;}10%{opacity: 0.1;}50%{opacity: 0.5;}100% {opacity: 1;}
}.active .bg1{animation: menuAwave 1s ; }

js动画-计数器

/*** 数字滚动* * @param {String} target   滚动对象* @param {Number} endVal   滚动结束时的数字* @param {Object} options  配置* @param {Object} context  微信小程序当前this对象* * forked from https://github.com/inorganik/CountUp.js*/
class WxCountUp {constructor(target = '', endVal = 0, options = {}, context = {}) {var _this = thisthis.target = target;this.endVal = endVal;this.options = options;this.context = context;this.version = '1.0.0';this.defaults = {startVal: 0,decimalPlaces: 0,duration: 1,useEasing: true,useGrouping: true,smartEasingThreshold: 999,smartEasingAmount: 333,separator: ',',decimal: '.',prefix: '',suffix: ''}this.finalEndVal = null;this.useEasing = true;this.countDown = false;this.error = '';this.startVal = 0;this.paused = true;this.count = function (timestamp) {if (!_this.startTime) {_this.startTime = timestamp;}var progress = timestamp - _this.startTime;_this.remaining = _this.duration - progress;// to ease or not to easeif (_this.useEasing) {if (_this.countDown) {_this.frameVal = _this.startVal - _this.easingFn(progress, 0, _this.startVal - _this.endVal, _this.duration);}else {_this.frameVal = _this.easingFn(progress, _this.startVal, _this.endVal - _this.startVal, _this.duration);}}else {if (_this.countDown) {_this.frameVal = _this.startVal - ((_this.startVal - _this.endVal) * (progress / _this.duration));}else {_this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration);}}// don't go past endVal since progress can exceed duration in the last frameif (_this.countDown) {_this.frameVal = (_this.frameVal < _this.endVal) ? _this.endVal : _this.frameVal;}else {_this.frameVal = (_this.frameVal > _this.endVal) ? _this.endVal : _this.frameVal;}// decimal_this.frameVal = Math.round(_this.frameVal * _this.decimalMult) / _this.decimalMult;// format and print value_this.printValue(_this.frameVal);// whether to continueif (progress < _this.duration) {_this.rAF = doAnimationFrame(_this.count);}else if (_this.finalEndVal !== null) {// smart easing_this.update(_this.finalEndVal);}else {if (_this.callback) {_this.callback();}}};// 默认格式和缓和函数this.formatNumber = function (num) {var neg = (num < 0) ? '-' : '';var result, x, x1, x2, x3;result = Math.abs(num).toFixed(_this.options.decimalPlaces);result += '';x = result.split('.');x1 = x[0];x2 = x.length > 1 ? _this.options.decimal + x[1] : '';if (_this.options.useGrouping) {x3 = '';for (var i = 0, len = x1.length; i < len; ++i) {if (i !== 0 && (i % 3) === 0) {x3 = _this.options.separator + x3;}x3 = x1[len - i - 1] + x3;}x1 = x3;}// optional numeral substitutionif (_this.options.numerals && _this.options.numerals.length) {x1 = x1.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });x2 = x2.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });}return neg + _this.options.prefix + x1 + x2 + _this.options.suffix;};this.easeOutExpo = function (t, b, c, d) {return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;};this.options = __assign({}, this.defaults, options);this.formattingFn = (this.options.formattingFn) ? this.options.formattingFn : this.formatNumber;this.easingFn = (this.options.easingFn) ? this.options.easingFn : this.easeOutExpo;this.startVal = this.validateValue(this.options.startVal);this.frameVal = this.startVal;this.endVal = this.validateValue(endVal);this.options.decimalPlaces = Math.max(0 || this.options.decimalPlaces);this.decimalMult = Math.pow(10, this.options.decimalPlaces);this.resetDuration();this.options.separator = String(this.options.separator);this.useEasing = this.options.useEasing;if (this.options.separator === '') {this.options.useGrouping = false;}if (this.target && typeof target === 'string') {this.printValue(this.startVal);} else {this.error = '[CountUp] target is null or undefined';}}// 决定数字滚动的方向determineDirectionAndSmartEasing () {var end = (this.finalEndVal) ? this.finalEndVal : this.endVal;this.countDown = (this.startVal > end);var animateAmount = end - this.startVal;if (Math.abs(animateAmount) > this.options.smartEasingThreshold) {this.finalEndVal = end;var up = (this.countDown) ? 1 : -1;this.endVal = end + (up * this.options.smartEasingAmount);this.duration = this.duration / 2;}else {this.endVal = end;this.finalEndVal = null;}if (this.finalEndVal) {this.useEasing = false;}else {this.useEasing = this.options.useEasing;}}// 开始动画start (callback) {if (this.error || !this.context) {return;}this.callback = callback;if (this.duration > 0) {this.determineDirectionAndSmartEasing();this.paused = false;this.rAF = doAnimationFrame(this.count);} else {this.printValue(this.endVal);}}// 暂停/恢复动画pauseResume () {if (!this.paused) {abortAnimationFrame(this.rAF);} else {this.startTime = null;this.duration = this.remaining;this.startVal = this.frameVal;this.determineDirectionAndSmartEasing();this.rAF = doAnimationFrame(this.count);}this.paused = !this.paused;}// 重置为 startVal，以便动画可以再次运行reset () {abortAnimationFrame(this.rAF);this.paused = true;this.resetDuration();this.startVal = this.validateValue(this.options.startVal);this.frameVal = this.startVal;this.printValue(this.startVal);}// 通过一个新的 endVal 并开始动画update (newEndVal) {abortAnimationFrame(this.rAF);this.startTime = null;this.endVal = this.validateValue(newEndVal);if (this.endVal === this.frameVal) {return;}this.startVal = this.frameVal;if (!this.finalEndVal) {this.resetDuration();}this.determineDirectionAndSmartEasing();this.rAF = doAnimationFrame(this.count);}// 输出值printValue (val) {var result = this.formattingFn(val);var target = this.targetthis.context && this.context.setData({[target]: result})}// 是否数字类型ensureNumber (n) {return (typeof n === 'number' && !isNaN(n));}// 验证值的类型validateValue (value) {var newValue = Number(value);if (!this.ensureNumber(newValue)) {this.error = "[CountUp] invalid start or end value: " + value;return null;}else {return newValue;}}// 重置动画间隔resetDuration () {this.startTime = null;this.duration = Number(this.options.duration) * 1000;this.remaining = this.duration;}
}/*** 复制对象*/
var __assign = (this && this.__assign) || function () {__assign = Object.assign || function(t) {for (var s, i = 1, n = arguments.length; i < n; i++) {s = arguments[i];for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))t[p] = s[p];}return t;};return __assign.apply(this, arguments);
};/*** 代替 requestAnimationFrame 帧渲染* copy from https://www.dennic365.com/blog/?p=87*/var lastFrameTime = 0;
// 模拟 requestAnimationFrame
var doAnimationFrame = function (callback) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastFrameTime));var id = setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);lastFrameTime = currTime + timeToCall;return id;
};
// 模拟 cancelAnimationFrame
var abortAnimationFrame = function (id) {clearTimeout(id)
}export default WxCountUp//使用
import WxCountUp from './WxCountUp.js'
const numAdd = (val,context,name) =>{context[name] = wx.createAnimation();context.countUp = new WxCountUp(name, val, {startVal: 0 // 初始值}, context); context.countUp.start(() => console.log('Complete!'));
}
setTimeout(() => {this.numAdd(20,this,'number20')
}, 3500);
//绑定wxml<view class="num">{{number20}}+</view>

文字逐字显示：

setTimeout(() => {var that=thisif(!that.textTime){this.opcityicon2();//文字逐个显示var story = "文字123123123123123";var i = 0;that.textTime = setInterval(function () {var text = story.substring(0, i);i++;that.setData({text: text});if (text.length == story.length) {clearInterval(that.textTime);that.textTime='end'}}, 10)}}, 2500);

根据wx-animation封装动画方法

// 基础渐变
const timeLineOpactity = (context,name) =>{context[name] = wx.createAnimation();context[name].opacity(0.3).opacity(0.6).opacity(1).step()
}
使用//// 动画相关movex: function () {flash.timeLineOpactity(this,'animat')this.setData({animat: this.animat.export()})},//wxml<view style='opacity:0' animation="{{animat}}">渐变123</view>

时间轴

//wxml
<view class="box"><view wx:for="{{list}}" wx:key="index" class="one"><view class="onedot"></view><view wx:if="{{index!=list.length-1}}" class="oneline"></view><view class="onemain"><view class="onemaintitle">{{item.time}}</view><view class="onemaincon">{{item.con}}</view></view></view>
</view>
//wxss
.box {padding: 30rpx;
}
.one {position: relative;padding-bottom: 40rpx;
}
.onedot {left: -2rpx;width: 24rpx;height: 24rpx;position: absolute;background-color: #67c23a;border-radius: 50%;display: flex;justify-content: center;align-items: center;z-index: 1;
}
.oneline {position: absolute;left: 8rpx;height: 100%;border-left: 2px solid #e4e7ed;
}
.onemain {position: relative;padding-left: 56rpx;top: -6rpx;
}
.onemaintitle {margin-bottom: 16rpx;padding-top: 8rpx;color: #909399;line-height: 1;font-size: 26rpx;
}
.onemaincon {color: #303133;
}
//js
data: {list: [{time: "2021-02-02 10:30:30",con: "这是主要内容部分"},{time: "2021-02-02 10:30:30",con: "这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分"},{time: "2021-02-02 10:30:30",con: "这是主要内容部分这是主要内容部分这是主要内容部分这是主要内容部分"}]},

使用swiper，中间放大，左右缩小效果

//wxml
<swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange"><block wx:for="{{imgUrls}}" wx:index="{{index}}"><swiper-item class="swiper-item"><image mode="aspectFill" src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/></swiper-item></block>
</swiper>
//wxss
.swiper-block{height: 480rpx;width: 100%;}
.swiper-item{display: flex;flex-direction: column;justify-content: center;align-items: flex-start;overflow:unset;
}
.slide-image{height:320rpx;width: 520rpx;border-radius: 9rpx;box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2);margin: 0rpx 30rpx;z-index: 1;
}
.active{transform: scale(1.14);transition:all .2s ease-in 0s;z-index: 20;
}.swiper-block{height: 480rpx;width: 100%;
}
.swiper-item{display: flex;flex-direction: column;justify-content: center;align-items: flex-start;overflow:unset;
}
.slide-image{height:320rpx;width: 520rpx;border-radius: 9rpx;box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2);margin: 0rpx 30rpx;z-index: 1;
}
.active{transform: scale(1.14);transition:all .2s ease-in 0s;z-index: 20;
}
//js
data: {imgUrls: ['http://img.alicdn.com/tfs/TB1pYiNDEY1gK0jSZFCXXcwqXXa-420-420.png_200x200Q90.jpg','http://img.alicdn.com/tfs/TB1pYiNDEY1gK0jSZFCXXcwqXXa-420-420.png_200x200Q90.jpg','http://img.alicdn.com/tfs/TB1pYiNDEY1gK0jSZFCXXcwqXXa-420-420.png_200x200Q90.jpg'],indicatorDots: false,autoplay: false,interval: 5000,duration: 1000,swiperIndex: 0,  // 第一次加载默认第一张图片选中},// 方法 swiperChange(e) {const that = this;that.setData({swiperIndex: e.detail.current,})},

微信小程序模拟ppt效果的公司介绍分步骤流程(主要使用Animation)。使用时间轴介绍以及swiper相关推荐

微信小程序—模拟豆瓣搜索电影（图文）
微信小程序-模拟豆瓣搜索电影先新建search目录和page 1.在search.wxml页面给input添加bindinput事件给input写一个value值,用来清空给button绑定b ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
【微信小程序】幻灯片效果实现
[微信小程序]幻灯片效果实现 <view style="height: {{276-headHeight}}px;" class="bgIndex"> ...
微信小程序讲解ppt(内附ppt资源及网易云api案例）
超详细微信小程序讲解ppt文档,点我去下载使用网易云api制作案例 ppt概览图如下: 小程序图片:
微信小程序模拟车牌号键盘
微信小程序模拟车牌号键盘效果图中文键盘英文数字键盘项目地址:https://github.com/ushars/keyboard
微信小程序模拟拨打电话
微信小程序模拟拨打电话使用单击事件 gophone: function () {wx.makePhoneCall({phoneNumber: '4000111212',/*模拟的电话号码*/})},
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果
android 自定义Scrollview实现淘宝二层楼效果新版微信小程序下拉效果由于最近一段时间真的是太忙了,没有顾上即使更新博客,还请粉丝们见谅,最近要实现这样一个效果,这个效果跟淘宝二层楼和新 ...
微信小程序的动画效果@keyframes
微信小程序的动画效果@keyframes 定义动画的格式: @keyframes 动画名称{ 阶段1{css样式} 阶段2{css样式} 阶段3{css样式} } 每个阶段用百分比表示,即从0%到1 ...

微信小程序模拟ppt效果的公司介绍分步骤流程(主要使用Animation)。使用时间轴介绍以及swiper

思路：

Step1：

Step2

Step3

css3动画

js动画-计数器

文字逐字显示：

根据wx-animation封装动画方法

时间轴

使用swiper，中间放大，左右缩小效果

微信小程序模拟ppt效果的公司介绍分步骤流程(主要使用Animation)。使用时间轴介绍以及swiper相关推荐

最新文章

热门文章