JS——アニメーション
35444 ワード
運動は構想を実現します
1.速度(均等速)
left、right、width、height、opacityを変更します.
実例1(速度)
サイドバーで共有するケースを作ります.
考え方
容器の相対位置決めを設定します.
内容は元々のleftはマイナスで、タイマーをセットして、時間ごとに少し露出します.
offset Leftが0になるまで、タイマーを終了します.
コード
透明度css属性
上の例と同じですが、最後の操作の属性は透明度です.
実例
考え方
差が小さいと速度が遅くなります.
特に注意する
上の計算は小数点の出現を招きます.ブラウザは下の整数点を無視しています.
結果として、私たちが設定した目標値に達することができなくなります.
ですから、私たちはいくつかの処理をしなければなりません.
実例
考え方エルゴードには、それぞれのイベントが必要です. 多物体なので、物体はどれかを区別して、thisをパラメータとして伝えます. それぞれの物体にはサブセット専用のタイマーが必要であるため、循環体にタイマーを設置する. 特に注意する
実際の仕事の中で、物体はきっと枠、内外の余白があります.offset類の属性を使い続けると、バグが発生するので、物体自体の広い高等サイズの属性を取得する必要があります.
コード内には、get Style方法が実装されており、IEは、currentStyle属性を通じて要素属性を取得し、残りのブラウザは、get ComputatidStyle()方法で要素属性を取得している.
実例
運動関数にパラメータを追加して、フィードバック関数を実行します.
第一版コード
スクリーンのズーム率が100%以外の場合、要素の幅の計算が問題になり、最終的にチェーン運動ができなくなる可能性があります.
解決策:
1.スクリーンのズーム率に問題があるなら、まずユーザーに注意して、画面の解像度を100%に調整してください.
ChromeとFireFoxであれば、window.devicePixelRatioインターフェースで照会できます.
IEはwindow.screen.deviceXDPIとwindow.screen.logicalXDPIを使用する.
他のブラウザはwindow.outerWidthとwindow.inner Widthの2つの属性を使用しています.
2.remを使って単位に対して
rem相対単位を使用してiTargetを関数内部変数に変更し、着信パラメータを倍数に変更します.
この中に問題があります.get Style関数が属性を取得する単位はpxで、remではなく、icur変数を処理する必要があります.
現在iTargetは固定されていない値ですので、判断条件はicurと最終値の比較に変えるべきです.
第二版コード
jsonを使って、私たちの属性と目標値を保存します.
また、停止条件をすべての属性に変更して目標値にします.このため、変数flagsを宣言します.目標値に達していない属性もあります.flagsはfalseです.停止できません.
インスタンスコード
1.速度(均等速)
left、right、width、height、opacityを変更します.
実例1(速度)
サイドバーで共有するケースを作ります.
考え方
容器の相対位置決めを設定します.
内容は元々のleftはマイナスで、タイマーをセットして、時間ごとに少し露出します.
offset Leftが0になるまで、タイマーを終了します.
コード
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(0);
}
oDiv.onmouseout=function(){
startMove(-200);
}
}
var timer=null;
function startMove(iTarget){
clearInterval(timer);
var oDiv=document.getElementById("div1");
timer=setInterval(function(){
var speed=0;
// or left
if(oDiv.offsetLeft > iTarget){
speed = -10;
}else{
speed = 10;
}
//
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}透明度css属性
filter:alpha(opacity:30); IE8 0-100
opacity:0.3; 0~1
上の例と同じですが、最後の操作の属性は透明度です.
実例
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(100);
}
oDiv.onmouseout=function(){
startMove(30);
}
}
var timer=null,
alpha=30;
function startMove(iTarget){
clearInterval(timer);
var oDiv=document.getElementById("div1");
// ， speed
timer=setInterval(function(){
var speed=0;
if(alpha > iTarget){
speed = -10;
}else{
speed = 10;
}
if(alpha==iTarget){
clearInterval(timer);
}else{
alpha+=speed;
oDiv.style.filter = "alpha(opacity:'+alpha+')";
oDiv.style.opacity = alpha/100;
}
},30)
}考え方
speed = （ ）/
差が小さいと速度が遅くなります.
特に注意する
上の計算は小数点の出現を招きます.ブラウザは下の整数点を無視しています.
結果として、私たちが設定した目標値に達することができなくなります.
ですから、私たちはいくつかの処理をしなければなりません.
実例
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(0);
}
oDiv.onmouseout=function(){
startMove(-200);
}
}
var timer=null;
function startMove(iTarget){
clearInterval(timer);
var oDiv=document.getElementById("div1");
timer=setInterval(function(){
var speed = (iTarget-oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+"px";
}
},30)
}
考え方
実際の仕事の中で、物体はきっと枠、内外の余白があります.offset類の属性を使い続けると、バグが発生するので、物体自体の広い高等サイズの属性を取得する必要があります.
コード内には、get Style方法が実装されており、IEは、currentStyle属性を通じて要素属性を取得し、残りのブラウザは、get ComputatidStyle()方法で要素属性を取得している.
実例
window.onload=function(){
var aLi = document.getElementsByTagName("li");
//
for(var i=0;i// null
aLi[i].timer=null;
aLi[i].onmouseover=function(){
//this
startMove(this,400);
}
aLi[i].onmouseout=function(){
startMove(this,200);
}
}
}
//
function getStyle(obj,attr){
if(obj.currentStyle){ //ie
return obj.currentStyle[attr];
}
else{ //W3C
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,iTarget){
//
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur = parseInt(getStyle(obj,'width'));
var speed = (iTarget-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(icur==iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = icur+speed+"px";
}
},30)
} 運動関数にパラメータを追加して、フィードバック関数を実行します.
第一版コード
<html>
<head>
<meta charset="utf-8">
<title> title>
<style>
*{
margin:0;
padding:0;
}
ul,li {
list-style:none;
}
ul li {
width:200px;
height:100px;
background:yellow;
margin-bottom:20px;
border:4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
style>
<script>
window.onload=function(){
var Li=document.getElementById('li1');
Li.onmouseover= function(){
startMove(Li,'width',400,function(){
alert("done");
});
}
}
function getStyle(obj, atttr) {
if(obj.currentStyle) {
return obj.currentStyle[atttr];
} else {
return getComputedStyle(obj, false)[atttr];
}
}
function startMove(obj, attr, iTarget, fn) {
clearInterval(obj.timmer);
obj.timmer = setInterval(function() {
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(icur == iTarget) {
clearInterval(obj.timmer);
if(fn) {
fn();
}
} else {
if(attr == 'opacity') {
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style[attr] = (icur + speed) + 'px';
}
}
}, 30);
}
script>
head>
<body>
<ul>
<li id="li1">li>
ul>
body>
html>スクリーンのズーム率が100%以外の場合、要素の幅の計算が問題になり、最終的にチェーン運動ができなくなる可能性があります.
解決策:
1.スクリーンのズーム率に問題があるなら、まずユーザーに注意して、画面の解像度を100%に調整してください.
ChromeとFireFoxであれば、window.devicePixelRatioインターフェースで照会できます.
IEはwindow.screen.deviceXDPIとwindow.screen.logicalXDPIを使用する.
他のブラウザはwindow.outerWidthとwindow.inner Widthの2つの属性を使用しています.
2.remを使って単位に対して
rem相対単位を使用してiTargetを関数内部変数に変更し、着信パラメータを倍数に変更します.
この中に問題があります.get Style関数が属性を取得する単位はpxで、remではなく、icur変数を処理する必要があります.
現在iTargetは固定されていない値ですので、判断条件はicurと最終値の比較に変えるべきです.
第二版コード
<html>
<head>
<meta charset="utf-8">
<title> title>
<style>
*{
margin:0;
padding:0;
}
html {
font-size:20px;
}
ul,li {
list-style:none;
}
ul li {
width:10rem;
height:5rem;
background:yellow;
margin-bottom:20px;
border:4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
style>
<script>
window.onload=function(){
detectZoom ();
var Li=document.getElementById('li1');
Li.onmouseover= function(){
startMove(Li,'width',2,function(){
alert("done");});
}
}
function detectZoom (){
var ratio = 0,
screen = window.screen,
ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
ratio = window.devicePixelRatio;
}
else if (~ua.indexOf('msie')) {
if (screen.deviceXDPI && screen.logicalXDPI) {
ratio = screen.deviceXDPI / screen.logicalXDPI;
}
}
else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
ratio = window.outerWidth / window.innerWidth;
}
if (ratio){
if(ratio !=1){
alert(" ， 100%");
}
}
}
function getStyle(obj, atttr) {
if(obj.currentStyle) {
return obj.currentStyle[atttr];
} else {
return getComputedStyle(obj, false)[atttr];
}
}
function startMove(obj, attr, beishu, fn) {
clearInterval(obj.timmer);
obj.timmer = setInterval(function() {
var icur = 0;
if(attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
icur = parseInt(getStyle(obj, attr))/20;
}
var iTarget = icur*beishu;
var speed = (iTarget - icur) / 15;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(icur >= 20 ) {
clearInterval(obj.timmer);
if(fn) {
fn();
}
} else {
if(attr == 'opacity') {
obj.style.opacity = (icur + speed) / 100;
} else {
obj.style[attr] = (icur + speed) + 'em';
}
}
}, 30);
}
script>
head>
<body>
<ul>
<li id="li1">li>
ul>
body>
html>jsonを使って、私たちの属性と目標値を保存します.
また、停止条件をすべての属性に変更して目標値にします.このため、変数flagsを宣言します.目標値に達していない属性もあります.flagsはfalseです.停止できません.
インスタンスコード
<html>
<head>
<meta charset="utf-8">
<title> title>
<style>
*{
margin:0;
padding:0;
}
ul,li {
list-style:none;
}
ul li {
width:200px;
height:100px;
background:yellow;
margin-bottom:20px;
border:4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
style>
<script>
window.onload=function(){
var oLi=document.getElementById("li1");
oLi.onmouseover=function(){
startMove(oLi,{width:400,height:201,opacity:100});
}
oLi.onmouseout=function(){
startMove(oLi,{width:200,height:100,opacity:30});
}
}
function getStyle(obj,attr){
if(obj.currentStyle){ //ie
return obj.currentStyle[attr];
}
else{ //W3C
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;//
for(var attr in json){
//1.
var icur=0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur = parseInt(getStyle(obj,attr));
}
//2.
var speed = (json[attr]-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3.
if(icur!=json[attr]){ //
flag = false;
}
if(attr == 'opacity')
{
obj.style.filter = 'alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else
{
obj.style[ attr] = icur+speed+"px";
}
}
if(flag)
{
clearInterval(obj.timer);
if(fn){
fn();
}
}
},30)
}
script>
head>
<body>
<ul>
<li id="li1">li>
ul>
body>
html>