其实是依托Css3的功劳，先上一个例子
代码地址：链接: https://pan.baidu.com/s/1sldhljJ 密码: i6qh
这动画纵有万般变化，也离不开以下几个属性
transform (元素2D 3D转换)
translate,3d,X,Y,Z (移动距离)
scale,3d,X,Y,Z (缩放比例)
rotate,3d,X,Y,Z (旋转角度)
skew,X,Y (倾斜角度)
transform-origin (允许被转换元素位置)
left center right length %
transform-style (被嵌套元素在3D空间中显示)
flat (2d) presever-3d (3d)
perspective (3D元素透视效果 俗称"景深")
number
perspective-origin (设置3D基数位置 x,y)
top center right length %
backface-visibility (元素不面对屏幕是否可见)
visible hidden
这里写一个变化的例子，帮助理解
以上例子只是单一的变化 如果多个变化一起执行 遵守 “慢写的先执行”
比如：
原始图片：
"translateX(150px) rotateY(180deg)"： 先旋转再移动
"rotateY(180deg) translateX(150px)"： 先移动再旋转
为什么两者只是前后顺序不同 结果却是相反的呢？
这就涉及到了 中心点的问题 transform-origin
transform-origin 变换原点 center center;
关键字: top bottom center left right;
具体的长度单位(em,rem,px...)
会受到原点影响的变换有：rotate、skew、scale
translate不受影响
第一个是先根据中心原点旋转180度 再向右移动150pxbr
第二个向右移动150px 中心点未改变 再旋转180deg
还有一点需要注意：
在js中没有办法 通过计算后样式 获取到 transform中的相关操作，只能获取到矩阵
getComputedStyle(XX)['transform'] 得到的是 matrix3d(...)
关于 transform的所有操作，通过封装cssTransform来进行操作，
在 cssTransform 中来记录 对transform的每一步操作，相当于对象赋值。获取的时候，就获取 cssTransform中的记录
function css(element, attr , val){ // 通过判断 归纳transform 属性 直接跳到cssTramsform 剩下的直接常规方法处理
if(attr == "rotate" || attr == "rotateX"
|| attr == "rotateY" ||attr == "rotateZ"
|| attr == "scale" || attr == "scaleX"
|| attr == "scaleY" || attr == "skewX"
|| attr == "skewY" || attr == "translateX"
|| attr == "translateY" || attr == "translateZ" ){ return cssTransform(element, attr, val);
} if(arguments.length == 2){ var val = getComputedStyle(element)[attr]; if(attr=='opacity'){
val = Math.round(val*100);
} return parseFloat(val);
}
if(attr == "opacity") {
element.style.opacity= val/100;
} else {
element.style[attr]= val + "px";
}
}function cssTransform(el, attr, val) { if(!el.transform){
el.transform = {}
} // 如果val为空 为获取值
if(typeof val == "undefined"){ if(typeof el.transform[attr] == "undefined"){ switch(attr) { case "scale": case "scaleX": case "scaleY":
el.transform[attr] = 100; break; default:
el.transform[attr] = 0;
}
} return el.transform[attr];
} else { // 设置值 原理就是对象的赋值
var transformVal = "";
el.transform[attr] = Number(val); for(var s in el.transform){ switch(s){ case "rotate": case "rotateX": case "rotateY": case "rotateZ": case "skewX": case "skewY":
transformVal += " "+s+"("+el.transform[s]+"deg)"; break; case "translateX": case "translateY": case "translateZ":
transformVal += " "+s+"("+el.transform[s]+"px)"; break; case "scale": case "scaleX": case "scaleY":
transformVal += " "+s+"("+el.transform[s]/100+")"; break;
}
}
el.style.WebkitTransform = el.style.transform = transformVal;
}
}
加下来介绍核心库：m.Tween.js运动函数
使用如下：
MTween({
el: div, // 目标元素
target: { // 期望最后变化的值
scale: 200,
translateX: 200,
translateY: 200,
rotate: 360
},
time: 1000, // 动画执行时间
type: "backOut", // 动画特效 贝塞尔曲线
callBack: function(){ // 动画执行结束的回调
console.log("动画执行完了");
},
callIn: function(){ // 动画执行过程的回调
console.log("动画执行中");
}
})
实现的代码也很简单
function MTween(init){ var t = 0; var b = {}; var c = {}; var d = init.time / 20; for(var s in init.target){
b[s] = css(init.el, s);
c[s] = init.target[s] - b[s];
}
clearInterval(init.el.timer);
init.el.timer = setInterval( function(){
t++; if(t>d){
clearInterval(init.el.timer);
init.callBack&&init.callBack.call(init.el);
} else {
init.callIn&&init.callIn.call(init.el); for(var s in b){ var val = (Tween[init.type](t,b[s],c[s],d)).toFixed(2);
css(init.el, s, val);
}
}
},20);
}
以上只是基础知识，为下面的教程铺垫
正文开始：
1、安踏图标转动，来回变化，消失
2、碎片，云朵不规则圆柱转动
3、主体，浮层 圆柱形滚动入场
4、移动事件，陀螺仪，横竖屏事件
// 整体Html结构<div id="pageBg"></div> <div id="view"> <div id="logo1"> <div class="logoImg"> <img src="load/logo.png"> </div> <p class="logoText">已加载 0%</p> </div> <div id="main"> <div id="tZ"> <div id="panoBg"></div> <div id="cloud"></div> <div id="pano"></div> </div> </div> </div>
1、安踏图标转动，来回变化，消失
分析： 安踏图标有三个 分别为 logo1 logo2 logo3 (logo2 logo3 为动态生成，并提前赋值属性，加上360度旋转动画)
logo1 使用css3动画animation 360度转动 1s后透明度为0 并删除
logo2 由 translateZ : -1000 经过300ms 变为0 向前移动；接着经过800ms 变为-1000 向后移动
logo3 在logo2 删除后出现 由远到近 再接着消失
其实代码很简单 就是用下面的模型代码实现
MTween({
el: logo1,
target: {
opacity: 0 // 将要最终变化的值 },
time: 1000,
type: 'easeOut',
callBack: function() { // 运动结束的执行动作 view.removeChild(logo1)
css(logo2, 'opacity', 100) // 显示logo2
// 接下来做logo2动作 以此类推 MTween({
el: logo2,
target: {
translateZ: 0
},
time: 300,
type: 'easeBoth',
callBack: anmt2
})
}
})
2、碎片，云朵不规则圆柱转动
分析：将9张碎片图片乘3 然后设置随机的 rotateY rotateX translateZ translateY 变成一个随机圆柱排布，然后在碎片的主层加上 rotateY 旋转动画，再用动画控制translateZ 向后移动
祥云入场: 利用 sin cos R 计算translateX translateZ，然后在云层主层加上 rotateY 旋转动画，再用动画控制translateZ 向后移动
碎片代码
//基础框架版本 排成一圈for (var i = 0; i < 27; i++) { var R = 10 + Math.round(Math.random()*240); var deg = Math.round(Math.random()*360)
css(span, 'rotateY', deg)
css(span, 'translateZ', R)
}// 添加上下分布css(logo4, "translateZ", -2000)
css(logo4, "scale", 0)for (var i = 0; i < 27; i++) { var xR = 20 + Math.round(Math.random() * 240) // 圆柱碎片的X半径
var xDeg = Math.round(Math.random() * 360) var yR = 10 + Math.round(Math.random() * 240) // 圆柱碎片的Y半径
var yDeg = Math.round(Math.random() * 360)
css(span, "rotateY", xDeg);
css(span, "translateZ", xR);
css(span, "rotateX", yDeg);
css(span, "translateY", yR)
}// 从远到近的移动MTween({
el: logo4,
target: {
translateZ: 0,
scale: 100
},
time: 500,
type: "easeOutStrong",
callBack: function() {
setTimeout(function() { //从近到远 MTween({
el: logo4,
target: {
translateZ: -1000,
scale: 20
},
...
})
祥云代码
这里需要每一片云朵都面对我们自己
这里知道每一个R deg，便能求得x, z
x = Math.sin(deg * Math.PI / 180) * R
z = Math.cos(deg * Math.PI / 180) * R
var span = document.createElement("span");
span.style.backgroundImage = 'url(' + imgData.cloud[i % 3] + ')'; var R = 200 + (Math.random() * 150) // 设置随机半径
var deg = (360 / 9) * i // 圆柱各个角度
var x = Math.sin(deg * Math.PI / 180) * R // sin求得X
var z = Math.cos(deg * Math.PI / 180) * R // cos求得Z
var y = (Math.random() - .5) * 200 // 上下分布
css(span, "translateX", x)
css(span, "translateZ", z)
css(span, "translateY", y)
... // 设置动画 MTween({
el: cloud,
target: {
rotateY: 540
},
time: 3500,
type: "easeIn",
callIn: function() { // 这里需要用到运动过程的回调 将祥云外层的角度赋予内层祥云的每个角度
var deg = -css(cloud, "rotateY"); for (var i = 0; i < cloud.children.length; i++) {
css(cloud.children[i], "rotateY", deg);
}
}
})
3、主体，浮层 圆柱形滚动入场
这里的图片是由20张分割好的宽129px的图片组成
每张图片的角度deg为360/20,这样就能得到中心点距离每张图片的距离，利用数学的tan公式 R = (width / 2) / Math.tan((deg/ 2 )* Math.PI / 180) 
var panoBg = document.querySelector('#panoBg')var width = 129 // 一张图片宽度var deg = 360 / imgData.bg.length // 圆柱图片角度var R = parseInt((width / 2) / Math.tan((deg/ 2 )* Math.PI / 180) - 1) // tan@ = 对边(R) / 临边(W/2)var startDeg = 180; // 开始角度for (var i = 0; i < imgData.bg.length; i++) { var span = document.createElement("span");
css(span, 'rotateY', startDeg)
css(span, 'translateZ', -R)
span.style.backgroundImage = "url(" + imgData.bg[i] + ")";
panoBg.appendChild(span);
startDeg -= deg // 每张图片角度递减}
设置主体从远到近 类似画轴显示出来，在span初始化时候都设置display="none"，然后设置定时器依次打开
var timer = setInterval(function() {
panoBg.children[num].style.display = "block";
num++ if (num >= panoBg.children.length) {
clearInterval(timer)
}
}, 3600 / 2 / 20)
设置漂浮层
漂浮层相对简单一些，动态创建漂浮层，设置初始translateX translateZ，遍历对应的浮层，设置上面求得的半径距离，角度
var pano = document.querySelector('#pano'); // 浮层容器
var deg = 18; // 差值角度
var R = 406; // 上图计算的R
var nub = 0; // 计数
var startDeg = 180; // 初始角度
css(pano, "rotateX", 0);
css(pano, "rotateY", -180);
css(pano, "scale", 0); var pano1 = document.createElement("div");
pano1.className = "pano";
css(pano1, "translateX", 1.564);
css(pano1, "translateZ", -9.877); for (var i = 0; i < 2; i++) { var span = document.createElement("span");
span.style.cssText = "height:344px;margin-top:-172px;";
span.style.background = "url(" + imgData["pano"][nub] + ")";
css(span, "translateY", -163); // 设定固定的值
css(span, "rotateY", startDeg); // 角度逐级递减
css(span, "translateZ", -R);
nub++;
startDeg -= deg;
pano1.appendChild(span)
} var pano2 = document.createElement("div");
pano2.className = "pano";
css(pano2, "translateX", 20.225);
css(pano2, "translateZ", -14.695); for (var i = 0; i < 3; i++) { var span = document.createElement("span");
span.style.cssText = "height:326px;margin-top:-163px;";
span.style.background = "url(" + imgData["pano"][nub] + ")";
css(span, "translateY", 278);
css(span, "rotateY", startDeg);
css(span, "translateZ", -R);
nub++;
startDeg -= deg;
pano2.appendChild(span)
}
4、移动事件，陀螺仪，横竖屏事件
http://www.cnblogs.com/QRL909109/p/7041898.html
延伸阅读
- 告别“老顽固” 2023-04-18 11:15:46.437
- 时光飞逝 2024-03-26 11:25:53.823
- 会当凌绝顶，一览众山小 2023-04-18 10:38:34.08
- 自豪 2023-04-18 10:31:27.963
- 绽放 2023-04-18 10:30:19.243
- 毕业有感 2023-04-18 10:27:54.643
- 投入六个月的经历，收获了整个人生 2023-04-18 10:18:55.813
- 非常响亮的名字 2023-04-18 10:10:46.923
- 不可磨灭的力量 2023-04-18 10:06:02.717
- 困难是把双刃剑 2023-04-18 10:04:30.883
告别“老顽固”