网格图片动画效果源码

待我称王封你为后i 2022-08-04 08:43 155阅读 0赞

实现的代码比较简单，主要是用到了JQuery Easing。

JQuery在一些页面滚动效果、幻灯片切换等场景应用比较多。它是在JQuery原有的效果上进行了扩展，所以使用时可以根据JQuery原有的动画函数进行扩展。

（1）JQuery默认动画

支持toggle() slideUp() slideDown() show() hide()等Jquery内置的动画效果，使用如下：

$(element).slideUp({ 
    		duration: 1000,  
    		easing: method,  
    		complete: callback 
           });

（1）使用JQuery自定义动画函数animate()

JQuery Easing 结合JQuery的自定义动画函数animate()可以制作各种你想要的动画效果，例如：

$(element).animate({ 
    		height:500, 
    		width:600 
           },{ 
    		easing: 'easeInOutQuad', 
    		duration: 500, 
    		complete: callback

});

实现图片动画效果的jquery easing 结合animate的例子如下：

$(this).delay(d).animate({
    			opacity:1
    		},
    		{
    			step: function(n) {
    			//rotating the images on the Y axis from 360deg to 0deg
    			ry = (1 - n) * 360;
    			//translate images from 1000px to 0px
    			tz = (1 - n) *1000;
    			//applying the transformaton
    			$(this).css('transform', 'rotateY('+ ry+'deg)translateZ(' + tz + 'px)');
    		},
    		easing:'easeOutQuint',
    		duration: 3000
    	})

完整的源码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Grid-animation-efforts</title>
    	<style type="text/css">
    		* {
    			margin:0;
    			padding:0;
    		}
    		body {
    			text-align:center;
    			overflow:hidden;
    		}
    		.grid {
    			width:600px;
    			height:300px;
    			margin:100px auto 50px auto;
    			perspective:500px;
    		}
    		.grid img {
    			float:left;
    			width:60px;
    			height:60px;
    		}
    		.animate {
    			font:12px Montserrat;
    			text-transform: uppercase;
    			background:rgb(0,100,0);
    			color:white;
    			padding:10px 20px;
    			border-radius:5px;
    			cursor:pointer;
    		}
    		.animate:hover {
    			background:rgb(0,75,0);
    		}
    	</style>
    </head>
    <body>
    	<div class="grid"></div>
    	<span class="animate">Animate</span>
    	
    	<script src="http://thecodeplayer.com/u/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    	
    	<script src="http://thecodeplayer.com/u/js/jquery.easing.min.js" type="text/javascript"></script>
    	<script type="text/javascript">
    		var images = "",
    			count = 50,
    			d = 0,//delay
    			ry,tz,s;//transform params
    		for(var i = 1; i <= count ; i++) {
    			images += '<img src="http://thecodeplayer.com/u/uifaces/' + i +'.jpg">';
    		}
    		$('.grid').append(images);
    
    		$('.animate').on('click', function() {
    			//fading out the thumbnails with style
    			$('img').each(function() {
    				d = Math.random() * 1000;
    				$(this).delay(d).animate({opacity:0},{
    					step:function(n) {
    						s = 1 - n;
    						$(this).css('transform', 'scale(' + s + ')');
    					},
    					duration: 1000
    				})
    			}).promise().done(function() {
    				//after "promising and doing the fadeout animation we will bring the imags back"
    				storm();
    			})
    		})
    		function storm() {
    			$('img').each(function() {
    				d = Math.random() * 1000;
    				$(this).delay(d).animate({
    					opacity:1
    				},
    				{
    					step: function(n) {
    						//rotating the images on the Y axis from 360deg to 0deg
    						ry = (1 - n) * 360;
    						//translate images from 1000px to 0px
    						tz = (1 - n) *1000;
    						//applying the transformaton
    						$(this).css('transform', 'rotateY('+ ry+'deg)translateZ(' + tz + 'px)');
    					},
    					easing:'easeOutQuint',
    					duration: 3000
    				})
    			})
    		}
    	</script>
    </body>
    </html>

页面图：

![Center][]

[Center]: /images/20220731/38e106d8c47a46559661b140329ccb0c.png