《js动画效果》之透明度动画

最新推荐文章于 2021-09-09 09:47:43 发布

MMRS

最新推荐文章于 2021-09-09 09:47:43 发布

阅读量1.7k

点赞数

分类专栏：深入js 文章标签： js

本文链接：https://blog.csdn.net/mmrsdym/article/details/39990919

版权

深入js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

学习资源来自慕课网《js动画效果》：http://www.imooc.com/learn/167。

例子：初始透明度值为30，鼠标移上改变物体的透明度到100，鼠标移出模块区域将透明度由100变为30

刚开始我没想通为什么要那么复杂将其也用定时器来实现，鼠标移上时，直接将透明度的值设为100，移出时设为30就好了呀。后来比较了两种做法（采用定时器和不采用定时器）我才发现，我忽略了一个重要的现象，采用定时器才能更好的展示物体变化的过程，如图-1所示，而不用定时器，直接从将物体透明度从一个值变成另一个值，虽然简单，但是视觉上给人的感觉太突兀，因为变化太快了，如图-2所示，对于用户体验来说不好。老师把课程标题命名为”透明度动画“而不是”透明度变化“，看来是有理由的呀。

图-1 物体透明度”动画“（采用setInterval()实现）

图-2 物体透明度”变化“

此例也属于匀速运动类型，其匀速改变的是物体的透明度, 练习代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		#box{
			width:200px;
			height:200px;
			background:red;
			filter:alpha(opacity:30);
			opacity:0.3;
		}
	
		</style>
		<script type="text/javascript">

		  /*window.onload = function(){
		  	var divElem = document.getElementById("box");
			divElem.onmouseover = function(){
				divElem.style.filter = "100";
				divElem.style.opacity = 1 ;
			};
			divElem.onmouseout = function(){
				divElem.style.filter = "30";
				divElem.style.opacity = 0.3 ;
			}
		  }*/

		//使用定时器可以使动画达到更好的效果，突出透明度渐变的过程，可让变化不显得那么突兀
		window.onload = function(){
			var divElem = document.getElementById("box");
			divElem.onmouseover = function(){
				changeOpacity(100);
			};
			divElem.onmouseout = function(){
				changeOpacity(30);
			}
		}

		var timer = null;
		var opacityValue = 30;
		function changeOpacity(value){
			var divElem = document.getElementById("box");
			clearInterval(timer);
			
			timer = setInterval(function(){
				var speed = 0;
				if(opacityValue > value){
					speed = -10;
				}else{
					speed = 10;
				}
				if(opacityValue == value){
					clearInterval(timer);
				}else{
					opacityValue += speed;

					//兼容浏览器
					divElem.style.filter = "alpha(opacity:"+opacityValue+")";
					divElem.style.opacity = opacityValue/100 ;
				}

			},100);
		}
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

小结：

通过本例子的练习，我对匀速动画有了更好的理解，匀速动画的关键是改变 left, top, height, width, opacity的值，采用定时器setInterval()来实现。在合适的场景运用好动画，可以让用户体验更佳。