CSS3を使用しますanimation_html/css_WEB-ITnose

animate.cssというライブラリは聞いたことはありましたが、実際のプロジェクトで使ったことはありませんでしたが、今回は採用ページを作りたいだけなのでこれを活用させていただきます。ライブラリは、頻繁にフリーズする UC ブラウザでもスムーズに実行できます。

以下の QR コードをスキャンしてオンライン デモ ページをご覧ください:

CSS3 アニメーションのいくつかの基本概念にあまり詳しくない場合は、 「CSS3のアニメーション効果レコード」を参照してください。

1. animate.css ライブラリの関連知識ポイント

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. ページ開発プロセス

1) デザインドラフト

私が遭遇した最初の落とし穴は、私のページが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记录 》

三、JavaScript部分

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