JavaScript动画1-速度动画

动画实际上就是在一定时间内，改变一个元素的某些属性。

这里简单实现一个JavaScript运动的框架。主要包括：
1. 速度动画（改变left、right、width、height、opacity）
2. 缓冲运动
3. 多物体运动
4. 任意属性值改变
5. 链式运动
6. 多属性同时变化

速度动画

速度动画就是通过改变left、right、width、height、opacity的值来达到动画效果。我们先写一个简单的HTML结构：

<div id="div1"><span id="share">分享</span>
</div>

具体CSS样式效果如下图：

这里，我用CSS将div的left值设置为-200px,使其移除浏览器窗口：

具体CSS参考如下：

body {font-family: "SF UI Text", serif, sans-serif;font-size: 12px;
}
* {margin: 0;padding: 0;
}
#div1 {width: 200px;height: 200px;margin-top: 20px;background: rgb(43, 221, 255);position: relative;left: -200px;top: 0;
}
#div1 span {width: 20px;background: rgb(255, 119, 157);position: absolute;left: 200px;top: 75px;color: #fff;text-align: center;cursor: pointer;padding: 5px 1px 5px 0;border-radius: 0 5px 5px 0;
}
#div1 span:hover {background: rgb(255, 84, 137);
}

如果我们想要在鼠标经过span上时，让这个div显示出来，很简单，就是让div的left值变为0。想要动画效果，就需要用到定时器。

window.onload = function () {//速度动画(function () {var div = document.getElementById("div1");var timer = null;div.onmouseover = function () {startMove(0);};div.onmouseout = function () {startMove(-200);};function startMove(targetPosition) {clearInterval(timer);var speed = 0;if (targetPosition < 0) {speed = -10;} else {speed = 10;}timer = setInterval(function () {if (div.offsetLeft == targetPosition) {clearInterval(timer);} else {div.style.left = div.offsetLeft + speed + 'px';}}, 30);}})();
};

我们把所有代码放在了一个匿名函数(function(){ })()中，并且立即执行，目的是为了防止全局变量的污染。

同理可实现改变透明度的动画：

(function () {var div2 = document.getElementById("div2");var timer = null;div2.onmouseover = function () {changeOpacity(60);};div2.onmouseout = function () {changeOpacity(100);};var opacity = 100;function changeOpacity(targetOpacity) {clearInterval(timer);var speed = 0;if (opacity > targetOpacity) {speed = -10;} else {speed = 10;}timer = setInterval(function () {if (opacity == targetOpacity) {clearInterval(timer);} else {opacity = opacity + speed;div2.style.opacity = opacity / 100;}}, 30);}})();

效果如下：

HTML结构：

<div id="div2"></div>

CSS：

#div2 {width: 200px;height: 200px;background: rgb(255, 84, 137);cursor: pointer;
}

速度动画讲解完了。下一篇讲解运动缓冲效果。

JavaScript动画1-速度动画相关推荐

html如何设置滚动动画,JavaScript 实现页面滚动动画
在做前端 UI 效果时,让元素根据滚动位置实现动画效果是一个非常流行的设计,通常我们会使用第三方插件或库来实现.在本教程中,我将教大家使用纯 JavaScript 和 CSS 来实现. 先预览一下实现 ...
html动画之制作烟花效果,JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Fi ...
html动画效果结束返回,javascript判断css3动画结束 css3动画结束的回调函数
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发.不再需要大型类库支持,非常的简单实 ...
基于JavaScript的人物走路动画
基于JavaScript的人物走路动画想要实现人物走路的动态图,可以连续更换图片,给人一种人物在走路的假象,但是接下来我们用另外一种方法来实现,将所有单张图片拼接成一个长图,可以让图片移动代替更换图 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
JavaScript 动画和CSS3动画有什么区别? (前端面试题！必会)
1.CSS动画优点: 1.1)浏览器可以对动画进行优化. 1.1.1 )浏览器使用requestAnimationFrame 比起setTimeout, setInterval 设置动画的优势主要是 ...
JavaScript动画和CSS3动画的区别
一.CSS动画优点浏览器可以对动画进行优化浏览器使用域requestAnimationFrame类似的机制,requestAnimationFrame比起setTimeout,setInterv ...
gif动画修改_如何更改动画GIF速度
gif动画修改 Comedians would tell you that timing is the most important part of any joke. The same could ...
【JavaScript、CSS】css动画、js动画
动画 js动画 css动画 Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的. CSS动画简洁高效,提升交互体验而编写的 ...

JavaScript动画1-速度动画

速度动画

JavaScript动画1-速度动画相关推荐

最新文章

热门文章