使用requestAnimationFrame做动画效果一
最近学习了requestAnimationFrame，看了张鑫旭直白易懂，但是某些地方语言过于裸露的文章http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/，文章里的例子：http://www.zhangxinxu.com/study/201309/requestanimationframe-tween-easeoutbounce.html让我觉得这个requestAnimationFrame很厉害，虽然我对动画的接触还不多，但是我会努力的。
requestAnimationFrame是什么么？
requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API：
说简单点
- setInterval、setTimeout是开发者主动要求浏览器去绘制，但是由于种种问题，浏览器可能会漏掉部分命令
- requestAnimationFrame 就是浏览器什么要开始绘制了浏览器自己知道，通过requestAnimationFrame 告诉开发者，这样就不会出现重复绘制丢失的问题了
- requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧
- 隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
- requestAnimationFrame也会像setTimeout一样有一个返回值ID用于取消，可以把它作为参数传入cancelAnimationFrame函数来取消requestAnimationFrame的回调
下面是一个简单的例子：
<!doctype html><img id="book" style="background:red;opacity:1;position: relative; left: 500px;" alt="" width="100" height="123" data-mce-style="background: red; opacity: 1; position: relative; left: 500px;" /><div id="several"><br /></div><script type="text/javascript">
var book = document.getElementById('book')
var several = document.getElementById('several');
animate(book, {
left: 50,
duration: 2000
})
function animate(elem, options){
//动画初始值
var start = 500
//动画结束值
var end = options.left
//动画id
var timerId;
var createTime = function(){
return (+new Date)
}
//动画开始时间
var startTime = createTime();
var i = 0;
function tick(){
i++;
several.innerHTML = 'setInterval调用次数:' + i;
//每次变化的时间
var remaining = Math.max(0, startTime + options.duration - createTime())
var temp = remaining / options.duration || 0;
var percent = 1 - temp;
var stop = function(){
//停止动画
clearInterval(timerId);
timerId = null;
}
var setStyle = function(value){
elem.style['left'] = value + 'px'
}
//移动的距离
var now = (end - start) * percent + start;
if(percent === 1){
setStyle(now)
stop();
}else{
setStyle(now)
}
}
//开始执行动画
var timerId = setInterval(tick, 13);
}
</script>
此处不用点了，因为我无法向页面添加js代码，可是，为什么我看到别人的博客中可以呢，伤心。
function runCode(cod1) {
var cod = window.document.all(cod1)
var code = cod.value;
var newwin = window.document.open('', '', '');
newwin.opener = null
newwin.document.write(code);
newwin.document.close();
}
我做了个练习：
每隔1s长生一个小方块，让其匀速下落，落到底部消失，如果碰到底部中间的方块，小方块消失，分数加1，这个例子还有很多不足的地方，我会继续完善：
<script>
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var h=0;
var timer=setInterval(function(){
if(h>40){
clearInterval(timer);return;
}else{
h+=1;
var isSucceed;
var isOnBelow;
var isStillOn;
var dotX;
var dot=new Dot();
dotX=dot.getName();
isStillOn=true;
animate(dot.dom, {
top: window.innerHeight-dot.dom.offsetHeight,
duration: 3000
});
function animate(elem, options){
//动画初始值
var start = 0
//动画结束值
var end = options.top
var createTime = function(){
return (+new Date)
}
//动画开始时间
var startTime = createTime();
var timerId;
//开始动画
var startAnim = function() {
timerId = requestAnimationFrame(tick,15);
}
//停止动画
var stopAnim = function() {
cancelAnimationFrame(timerId)
}
var number=0;
var isRemove=true;
function tick(){
number++;
//每次变化的时间
var remaining = Math.max(0, startTime + options.duration - createTime())
var temp = remaining / options.duration || 0;
var percent = 1 - temp;
var setStyle = function(value){
elem.style['top'] = value + 'px';
var centerW=center.offsetLeft;
var centerH=center.offsetTop;
if(value>=(centerH-42)){
isOnBelow=true;
}else{
isOnBelow=false;
}
if(dotX>=(centerW-50)&&dotX<=(centerW+200)){
isSucceed=true;
}else{
isSucceed=false;
}
}
if(isRemove&&isOnBelow&&isSucceed){
isRemove=false;
stopAnim() ;
document.getElementById("view").removeChild(elem);
isStillOn=false;
count++;
document.getElementById("count").innerHTML="总分为:"+count+"分";
}
//移动的距离
var now = (end - start) * percent + start;
if(percent === 1){
setStyle(now);
if(isStillOn){
document.getElementById("view").removeChild(elem);
}
stopAnim() ;
}else{
setStyle(now);
startAnim(tick);
}
}
//开始执行动画
startAnim(tick);
}
}},1000)
document.getElementById("center").addEventListener("touchmove",function(e){
var touch=e.targetTouches[0].pageX;
// if(touch<0){touch=100;}
// if(touch>(document.body.clientWidth-center.clientWidth)){touch=document.body.clientWidth-center.clientWidth+100}
document.getElementById("center").style.left=touch+"px";
}); </script>
使用requestAnimationFrame做动画效果一的更多相关文章
- 使用requestAnimationFrame做动画效果二
3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...
- requestAnimationFrame 持续动画效果
1. requestAnimationFrame 概述 requestAnimationFrame 是浏览器用于定时循环操作的一个API, 类似于setTimeout, 主要用途是按帧对网页进行重绘. ...
- PDF转任意格式 & 做动画效果
1.PDF转任意格式 & 做动画效果|让PPT傻眼去吧! http://www.aiweibang.com/yuedu/6984803.html
- 原生js动画效果（源码解析）
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- ios 动画效果CATransition笔记
初学ios开发,很多概念还不清楚,所以只有边学边做例子.又怕学了后面忘了前面,因此用自己的博客来纪录自己的学习历程,也是对自己学习不要懈怠做个监督. 刚学ios做动画效果.因为ios封装得很好,实现i ...
- transition和animation做动画（css动画二）
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...
- 前端基础-jQuery的动画效果
阅读目录 隐藏 显示 切换 下拉 上卷 显示 一.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...
- jQuery 动画效果 与 动画队列
基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...
- 【从无到有】教你使用animation做简单的动画效果
今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...
随机推荐
- IDEA 将已有项目添加到git
首先,我们解决的情况是,已经有了一个正在开发的项目,现在我们要把他分享到git@osc上面去. 1.第一步,当然是先在Git@OSC上创建仓库,拿到Git@OSC仓库的HTTP连接http://git ...
- OJ生成器（一）制作Online Judge前的准备和策划
我这校区新的微机老师斗志昂扬,准备让我们这学校萎靡的信息技术竞赛重振雄风.然后有一次我半开玩笑地说建一个自己的OJ吧,老师也就鼓励我去做了. 开什么玩笑……!我可是马上要参加NOIP的人! 于是老师说 ...
- 罗技 UE3100 蓝牙耳机使用
罗技 UE3100 蓝牙耳机使用内置麦克风 蓝牙2.1蓝牙功能 和 手机 .平板 . 电脑 连接.开关 长按 5秒 开机 指示灯变成绿色并闪烁 此时耳机处于待蓝牙设备搜索状态当 智能手机 搜索 蓝牙设 ...
- 技术之余。。。电吉他自弹 魂斗罗 solo
测试一下 ---恢复内容开始--- ---恢复内容结束---
- How to convert webp to png/jpg/gif in MacOS
Environment I'm using OS X 10.11.4 and have homebrew 1.0.5 installed. Introduction I recently downlo ...
- [C#] Control.Invoke方法和跨线程访问控件（转载）
转载前,在网上找了好多INVOKE方法的文章,就这个看着还可以,明白了大概,以后再深用的时候再研究 ,废话少说上转载(连转载都说的这么有气势,哈哈) 在设计界面时,我们经常需要将一些需要时间才能完 ...
- 史上最详cxf-Springmvc-maven实现webservice教程(转)
虽知道webservice,工作两年一直没使用过,最近不忙趁机研究了下,实现了简单的服务端及客户端调用.鉴于慕课网没有webservice的教程,大多又都是学生,就在这里跟大家分享下,内容比较详细.大 ...
- HTML纯javaScript代码写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vueJs+webpack单页面应用--vue-router配置
vue-route版本要跟vue版本同步,我的vue用的2.0+的,vue-router 也用了最新版2.1+ npm安装vue-router: $ npm install vue-router -- ...
- django 富文本展示 以及 post提交出错
1.富文本转义 使用 {{ content.record.content | safe }} 2.post提交报错 页面表单内追加 <form id="f"action=&q ...