ホームページ > 記事 > ウェブフロントエンド > CSS3を使用しますanimation_html/css_WEB-ITnose
animate.cssというライブラリは聞いたことはありましたが、実際のプロジェクトで使ったことはありませんでしたが、今回は採用ページを作りたいだけなのでこれを活用させていただきます。ライブラリは、頻繁にフリーズする UC ブラウザでもスムーズに実行できます。
以下の QR コードをスキャンしてオンライン デモ ページをご覧ください:
CSS3 アニメーションのいくつかの基本概念にあまり詳しくない場合は、 「CSS3のアニメーション効果レコード」を参照してください。
github からダウンロードされたファイルには、3,000 行を超えるコードが含まれています。理解した。 。
しかし、内部のコードにはまだ興味深い側面がたくさんあります。
1. キーフレームの選択には整数だけでなく小数も含まれており、複数の正倍数を意味するものではありません。
2. 速度曲線を選択するには、cubic-bezier 関数を使用してベジェ曲線をカスタマイズします。 ここでは、ベジェ曲線を作成するためのオンライン ツールを紹介します。
3. アニメーション効果を実現するには、プロセス全体でtransform属性を使用します。translate3d、rotate3d、scale3dを多用し、ハードウェアアクセラレーションも有効にします。
4. パースペクティブ プロパティを使用して、カメラから要素平面までの距離を設定します。
1) 豊富なアニメーションが内蔵されています
1. バウンス、フラッシュ、パルス、ラバーバンド、シェイク、スイング (揺れ)、ウォブル (揺れ)
2 . フェード (フェードインまたはフェードアウト)
3. 反転 (反転)
5. スライド
2) translation3d、rotate3d、scale3d
上の図 人間の目の真反対が z 軸の正の方向です。これら 3 つのプロパティの効果はオンラインでデバッグできます。
1. translation3d の構文は次のとおりです。
の場合、tz 軸変位ベクトルの長さをパーセント値で設定することはできないと言われています。値がパーセント値である場合、無効な値とみなされます。
2.rotate3d の構文は次のとおりです。
x、y、z は 0 から 1 までの値で、主に要素の回転を記述するために使用されます。 X 軸または Y 軸、または Z 軸回転のベクトル値
a: は角度値であり、値が正の場合は主に 3D 空間内の要素の回転角度を指定するために使用されます。の場合、要素は時計回りに回転し、それ以外の場合、要素は反時計回りに回転します。
下の図では、2 ~ 3 個が X 軸の周りに回転し、6 ~ 1 個が Y 軸の周りに回転します。 Z 軸を中心とした回転の効果は 2D の効果と似ています。
3.scale3d の構文は次のとおりです。
2. ページ開発プロセス
私が遭遇した最初の落とし穴は、私のページがflexible.jsのスケーラブルなレイアウトを使用しているため、幅がデザインドラフトと同じになってしまうことでした。デザイン案の幅はiPhone6のCSSピクセルである750pxです。
マージンを設定するときにデザインドラフト上のマージンを直接使用できるように、750px にスケールしました。画面適応については、「モバイル開発画面適応分析」を参照してください。
幅は固定ですが、高さは異なります。携帯電話では 1198px、デザイン案では 1206px、実際には 1256px です。 Chrome上のシミュレーター。
まあ、デザイン案に従って余白を設定したのですが、シミュレーターや携帯電話でレンダリングしたときの見た目が実現できません。
2) 実装原則
ページをめくるとき、現在のページを非表示にし、新しいページにスタイルを追加し、アニメーションをトリガーします。
下の図の「li」は、ページをめくった後にスタイル「play」を追加し、アニメーション全体の実行を開始します。
「li」のサブ要素は img 画像であり、アニメーション化するのはこれらの img タグです:
CSS コードは次のとおりです。
下の図では、矢印は実際には 2 つのアニメーションを組み合わせたものですが、IOS では 2 つのアニメーションを実装できますが、Android では 1 つのアニメーションしか実装できません。
.img3 { width: 4.666667rem; height: 2.133333rem; left: 2.8rem; top: 4rem; z-index: 4;}.play .img3 { -webkit-animation: zoomInUp 1s 1.2s backwards; animation: zoomInUp 1s 1.2s backwards;}
まずズームインしてから、パルス効果を使用します。
3) アニメーションフィルモードの使用
.arrow { animation: zoomIn 1s 5s backwards, pulse 1s 0s infinite;}
このアニメーションは最初どのようにトリガーされるのかよくわかりませんでした、各要素は非表示になっています最初に はい、どうすればいいですか? いくつかのページを参照した後、次の属性を見つけました。
anime-fill-mode: アニメーション時間外のオブジェクトの状態を指定します。
これを「backwards」に設定します。アニメーションがアニメーション遅延で指定された期間表示される前に、start プロパティ値 (最初のキーフレームで定義) が適用されます。
最初のフレームで透明に設定すると、1 つずつ表示される効果が得られます。
左の図に示すように、表示はアニメーション化されないため、この時点では最初のフレームに透明度を設定できません。display:none を使用して非表示にすることはできません。
「逆方向」に設定されていない場合は、右図のようにアニメーション開始前に表示され、非表示になります。
4) rem と CSS 自動プレフィックス
現在、SASS を使用して CSS を記述しています。上記のコードの rem はコンパイル中に動的に計算されます。
-webkit の接頭辞もコンパイル中に動的に追加されます。
现在开发会使用前端自动化构建工具 gulp 。具体配置可以参考《 前端自动化构建工具gulp记录 》
1)slider绑定
给“ul”绑定 touchstart 、 touchmove 、 touchend 。 touch 的相关概念可以参考《 触屏touch事件记录 》
在 touchmove 中计算偏移量,超过指定的偏移才在 touchend 触发滑动效果。
页面中动画很多,有的地方需要在动画结束后触发一些效果,所以要绑定“webkitTransitionEnd”事件。
1 $slider.on("webkitTransitionEnd", 'li', function() { 2 isSlide = false; //slide动画结束 防止暴力切换 3 }); 4 $slider.on('touchstart', function(e) { 5 var touch = e.touches[0]; 6 startX = touch.clientX; 7 startY = touch.clientY; 8 if (isSlide) { 9 e.preventDefault();10 }11 }).on('touchmove', function(e) {12 var touch = e.touches[0],13 posY = touch.clientY,14 posX = touch.clientX;15 offsetY = posY - startY;16 offsetX = posX - startX;17 isMove = true;18 e.preventDefault();19 }).on("touchend", function(e) {20 if (!offsetY || Math.abs(offsetY) < 30 || !isMove) {21 return;22 }23 $this = $(e.target);24 if ($this[0].tagName != 'LI') {25 $this = $this.closest('li');26 }27 var current = $this.index();28 $this.siblings('li').removeClass('play'); //防止出现重叠BUG29 if (offsetY > 0) { //向下滑动30 direction = "down";31 $next = $this.prev();32 } else { //向上滑动33 direction = "up";34 $next = $this.next();35 }36 37 if (current == 0 && direction == 'down') {38 return;39 }40 if (current == length - 1 && direction == 'up') {41 return;42 }43 44 if (direction == 'up') {45 $this.addClass('move-up');46 } else {47 $this.addClass('move-down');48 }49 isSlide = true;50 offsetY = 0;51 offsetX = 0;52 setTimeout(function() {53 $this.removeClass('play move-up move-down');54 $next.addClass('play').siblings('li').removeClass('play');55 }, 300);56 });
2)e.preventDefault
在“ touchstart ”和“ touchmove ”都调用了这个方法,这句话的意思是 阻止默认行为。
第一个调用是为了防止在手指快速的上下滑动的时候触发“ touchend ”中的切换。
第二个是Android 4.0+的一个BUG,就是有时候不会触发“ touchmove ”事件,加了这个后就能触发。
不过加了这个后,相应位置的滚动就无效了,囧。
关于事件处理的相关概念可以参考《 JavaScript中事件处理 》
参考资料:
CSS3 Transform的perspective属性
CSS3 3D Transform