武汉兼职女: 制作h5婚礼邀请函动画总结

很多网上的婚纱摄影公司，或者婚庆公司，或者一些h5制作平台，都可以做一些婚礼邀请函，但是这样的婚礼邀请函千篇一律。没有什么特色，仅仅是图片展示。在某人的强烈要求之下，我制作了一个h5婚礼邀请函（目前源码暂时不公开吧，过段时间再说）。用到了一些知识和小技巧，在这里简单总结一下！

transform 中透视效果应用
动画的书写，自然少不了transform ，像translate3d、rotate、scale3d的应用，相信大家都很熟练了。假如不熟练的，可以看下animate.css,列举了一些常用的动画效果。我今天着重说一下perspective ，透视效果的实现。

perspective 动画透视效果

透视效果是近大远小，我的邀请函中，图片垂直翻转效果，用到了perspective 。让图片透视旋转。

@-webkit-keyframes rotater {
0% {
-webkit-transform: perspective(1200px) rotateY(-120deg);
transform: perspective(1200px) rotateY(-120deg);
}
100% {
-webkit-transform:perspective(800px) rotateY(180deg);
transform:perspective(800px) rotateY(180deg);
}
}

@keyframes rotater {
0% {
-webkit-transform: perspective(1200px) rotateY(-120deg);
transform: perspective(1200px) rotateY(-120deg);
}
100% {
-webkit-transform:perspective(800px) rotateY(180deg);
transform:perspective(800px) rotateY(180deg);
}

}
perspective()可以指定透视距离，值越小，显示越大，离你越近。

@font face特殊字体的应用
@font face除了用在字体图标icon中，我们还可以在我们网页中使用一些特殊字体，假如你觉得用户电脑或者手机中没有这个字体，你可以指定。（但是，假如你的字体很大，会拖慢你的加载速度，权衡特殊字体使网页加载速度变慢，因此，很多网页都是建议用电脑中的常用字体来展示）。

假如我的网页中要使用钢笔字体，一般用户没有，例子如下：

@font-face {
font-family: GB;
src: local("gangbiziti"), //查看本地有没有
url("gangbiziti.woff2"),
url("gangbiziti.woff"),
url("gangbiziti.ttf");
}
当然 @font-face还可以指定字体的名字，假如我们觉得微软雅黑 “‘Microsoft Yahei”,英文很难记，我们可以指定简写，代码如下：

@font-face {
font-family: YH;
src: local("Microsoft Yahei");
}
那么我们使用的时候直接：

.font {
font-family: YH;
}
关于字体的一些中英文对照，我很久之前的博客介绍过，大家请看：http://www.haorooms.com/post/IE_jianrong

字体的使用，我们推荐用英文字。

滑动事件的触发
用到了网页中判断是上滑，下滑，左滑，右滑还是点击，这里我之前有文章分享过，http://www.haorooms.com/post/webapp_bodyslidebcdiv

感兴趣的可以看一下！

requestAnimationFrame 动画
关于requestAnimationFrame 网上可以搜到很多相关文章，其中比较原始的还不错的，是 https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

这样，我们就可以不用再用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画了！直接用requestAnimationFrame

写个小例子吧：

html:

<div id="test" style="width:1px;height:17px;background:#0f0;">0%</div>
<input type="button" value="http://www.mamicode.com/Run" id="run"/>
js：

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var start = null;
var ele = document.getElementById("test");
var progress = 0;

function step(timestamp) {
progress += 1;
ele.style.width = progress + "%";
ele.innerHTML=progress + "%";
if (progress < 100) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
document.getElementById("run").addEventListener("click", function() {
ele.style.width = "1px";
progress = 0;
requestAnimationFrame(step);
}, false);

浏览器不兼容的降级解决方案

(function() {
var lastTime = 0;
var vendors = [‘webkit‘, ‘moz‘];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+‘RequestAnimationFrame‘];
window.cancelAnimationFrame =
window[vendors[x]+‘CancelAnimationFrame‘] || window[vendors[x]+‘CancelRequestAnimationFrame‘];
}

if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
图片预加载
因为网页中图片很大，很多，在网速不佳的情况下，打开速度很慢，这个怎么办呢？

邀请函图片展示页面初始只加载前面几张，在点击查看的时候，偷偷的预加载一下！图片预加载，我之前文章中也有提及过！然后滑动的时候再正式加载图片。（目前测试下来，效果稍微好了一些，但是还是有点慢！有待优化。）

音乐和视频控制
关于音乐控制，前段时间写了html5的audio实现高仿微信语音播放效果 ，写了音乐控制的一些方式，感兴趣的可以看一下！

视频控制和音乐控制差不多，我用到的唯一多的一点就是我要获取视频播放结束之后的状态，用如下代码：

html:

<video class="vido" id="vidoid" poster="images/photo/video.jpg">
<source src="http://www.mamicode.com/media/move.mp4" type="video/mp4">
</video>
js

$("#vidoid").bind(‘ended‘,function () {

})
//或者js
var md=document.getElementById("vidoid");
if(md.ended){
console.log("结束");
}
md.addEventListener("ended",function(){
console.log("结束");
})
监听ended事件，可以监听到视频是否播放结束。但是在微信中，不同手机效果不一样，有的手机播放结束之后会停止在结束页面，必须点击关闭才可以。当然，获取音频播放结束状态也可以用“ended”，具体事件可以参考武汉兼职女  www.lfgren.com 

打字效果的实现
打字效果，我用到的是typed.js ,比较好用，目前也是比较成熟的，但是也有很多css3或者其他的实现方式：

简单的js实现：

var s = ‘Hello World! Hello haorooms! Hello haorooms!‘;
var con = $(‘#haorooms‘);
var index = 0;
var length = s.length;
var tId = null;

function start(){
con.text(‘‘);

tId=setInterval(function(){
con.append(s.charAt(index));
if(index++ === length){
clearInterval(tId);
index = 0;
start()
}
},100);
}
start();
css3实现方式，当然，这个实现起来比较傻，但是也可以应对简单的需求！

html:

<p class="typing">
CSS3 timing-function steps
</p>
css:

.typing{
width:250px;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 3s steps(50, end) infinite;
animation: type 3s steps(50, end) infinite;
}
@-webkit-keyframes type{
from { width: 0;}
}

@keyframes type{
from { width: 0;}
}

武汉兼职女: 制作h5婚礼邀请函动画总结