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

5828次浏览

前言

很多网上的婚纱摄影公司,或者婚庆公司,或者一些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>

js

$("#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

Tags: html5动画

相关文章: