制作h5婚礼邀请函动画总结

2017年4月5日 25575次浏览

前言

很多网上的婚纱摄影公司，或者婚庆公司，或者一些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="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="media/move.mp4" type="video/mp4">
</video>

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

 })
//或者js
var md=document.getElementById("vidoid");
    if(md.ended){
        console.log("结束");
    }
    md.addEventListener("ended",function(){
         console.log("结束");
    })

监听ended事件，可以监听到视频是否播放结束。但是在微信中，不同手机效果不一样，有的手机播放结束之后会停止在结束页面，必须点击关闭才可以。当然，获取音频播放结束状态也可以用“ended”，具体事件可以参考：http://www.haorooms.com/post/html5_weixinyy

打字效果的实现

打字效果，我用到的是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;}
}

类似我之前的逐帧动画效果！

今天就先总结到这里！欢迎留言！

源码已上传github: https://github.com/confidence68/invitePage

制作公司数据大屏的几点技术总结

a:active加动画ios点击无效及不记录页面跳转历史解决方案

Tags: html5，动画