Mr.J-- 图片墙动画效果

大概思路

1、闪动的效果（瞬间让图片的宽高变为0，scale，随机）

2、图片从小变到大，同时透明度也有变化（必需是上一个运动走完了，才走这一步）

3、图片旋转，同时透明度也有变化（当所有图片透明度变为0的时候，才会走这一步）

获取页面元素

var btn = document.getElementById('btn');
var imgs = document.querySelectorAll("div>img");
var on = false;

给按钮添加事件

点击按钮之后的方法：

if (on) {
return;
}
on = true;

代表用户是否可以点击(如果正在运动让它的值为true,运动完成了，让它的值为false)

var endNum = 0; //代表图片运动完成的数量

var allEnd = 0; //所有的图片都走完了，才让用户再次点击

for (var i = 0; i < imgs.length; i++) {
//为什么用这种方法，因为我们想在定时器里面用i的值，所以只能用这种方法
(function (i) {
//以下是第一个效果
setTimeout(function () {
motion(imgs[i], '10ms', function () {this.style.transform = 'scale(0)';
}, function () {//第二个效果需要在这个函数里面去写motion(this, '4.1s', function () {this.style.transform = 'scale(1)';this.style.opacity = 0;}, function () {//这个函数执行，代表某一张图片完成了//怎么知道所有图片都运动完了？endNum++;if (endNum == 15) {//这个条件成立，代表所有的图片走运动完了//在这里做第三个效果toBig();}//console.log(endNum);});
});
}, Math.random() * 1000);
})(i);
}

上述demo进行三种效果的设置调用

进行toBig()方法的编写

坐标
X轴（平行地面）
Y轴（垂直地面）
Z轴（垂直屏幕）

让图片围绕Y轴旋转
要让图片在Z轴上位移

function toBig() {for (var i = 0; i < imgs.length; i++) {
//提前给每个图片设一个初始值
imgs[i].style.transition = '';
imgs[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() * 500 + 'px)';(function (i) {
setTimeout(function () {motion(imgs[i], '2s', function () {//在这里需要运动三个属性（旋转、位移、透明度）this.style.opacity = 1;imgs[i].style.transform = 'rotateY(-360deg) translateZ(0)';}, function () {allEnd++;if (allEnd == 15) {on = false;   //运动完成了，就它的值为false(用户可以再次点击了)}});
}, Math.random() * 1000);
})(i);
}
}

运动函数motion()编写

function motion(obj, time, doFn, callBack) {
obj.style.transition = time;   //给对象添加运动
doFn.call(obj);     //call用来调用函数，并且改变this指向，指向参数var called = false;  //解决transitionend调多次的问题//transitionend      代表运动完成后要做的事（事件）
obj.addEventListener('transitionend', function () {
if (!called) {
callBack && callBack.call(obj);
called = true;
}
}, false);
}

页面设置

运行效果：照片墙经过10ms的照片闪动，全程动画约4.1秒

Mr.J-- 图片墙动画效果相关推荐

CSS3 transition实现超酷图片墙动画效果
一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了 ...
利用MATLAB实现图片切换动画效果详解
内容摘要:本博文介绍MATLAB图片切换动画效果的制作以及GIF文件保存,并结合具体代码详细解释.介绍了利用MATLAB编程进行几幅图片的轮流切换,切换时实现与幻灯片切换相似的炫酷的图片切换特效.其中 ...
css3动画图片旋转绕轴,css3图片旋转如何实现？css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
PPT模板如何制作图片镜面动画效果？
PPT模板如何制作图片镜面动画效果?动画效果在ppt模板设计过程中,能给模板增色不少,今天ppt家园来介绍一ppt模板镜面动画效果的操作方法. 模板入口:https://www.pptjia.com ...
android图片gif动画效果,android中类似于gif 实现图片的动画效果
案例:实现gif动画效果,连续播放图片由于是转载的,也就没必要多说,直接上代码案例:在android中实现gif动态图片的效果: EarthAnimationActivity.java packa ...
android app启动图片加动画效果,Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案...
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案大家在设计APP的末期,都会想给APP搞一些"花里胡哨"的特效来提高APP的B格.博主表示亲测有效 ...
Python-pygame 使用subsurface()遍历图片达到动画效果
Python作业贴网络上很多介绍subsurface()的使用方法, 但毕竟不是自己手动写的,看着难受遂按照自己的理解重新写一遍 #! /usr/bin/python3# @File: test4 ...
关于IOS中通过图片实现动画效果
其实,让图片生成动画特别简单,就是快速轮播一组图片,形成视觉上的动画效果.需要用到的就是UIImageView,并且设置它的一些属性就可行了.包括以前很流行的Tom猫等小游戏,都是可以通过这个来实现. ...
android图片消失动画效果,用setAnimationStyle来设置popwindow显示消失的动画效果
popwindow通过setAnimationStyle(int animationStyle)函数来设置动画效果 android:windowEnterAnimation表示进入窗口动画 andro ...
vegas可以做动画吗_Vegas 对静态图片做动画效果
有用户在后台问小编如何实现Vegas静态图片变成从右边慢慢切入,然后在切入后某部分图片放大的效果. 这个效果小编称为Vegas图片切入放大效果,以下将做详细操作教程. 在做效果之前,小编今天早上打开V ...

Mr.J-- 图片墙动画效果

大概思路

获取页面元素

给按钮添加事件

进行toBig()方法的编写

运动函数motion()编写

页面设置

Mr.J-- 图片墙动画效果相关推荐

最新文章

热门文章