最近、フルーツパブリシティで菊の開花のアニメーションを見たのですが、シルクのような潤滑油と花びらの吹き出しが印象的でした。
具体的には、下のイメージを見て、ビデオはGIF画質の劣化に変換され、興味を持って果物の公開に行くことができます。
ソースコードをちらっと見ると、実はSVGアニメーションを使ったシーケンスフレームが綴られています。シーケンス・フレームとは？フルーツフロントエンドでは、シーケンスフレームを使用するために、なぜ良いGIFイメージを使用しないのですか？ゆっくり話を聞く理由
シーケンスフレームは、一連の静止イメージであり、これらのイメージは、特定の周波数、連続的なアニメーションの形成に従って再生され、一般的に毎秒24フレームの速度に達すると考えられている、人々は滑らかなアニメーションが表示されます、我々は通常、ビデオや動画の本質を参照してくださいシーケンスフレームで構成されています。
- 公開背景はアップロードされたGIFイメージを圧縮してしまい、GIFイメージ自体も透過に対応していないため、高画質を必要とするシーンには不向きです。その代わり、シーケンスフレームを使用することで、ロスレスPNGイメージを使用し、アニメーションを高精細に表示することができます。
- GIFアニメーションに比べて、プログラム制御のアニメーションは、よりスムーズで流動的なユーザーエクスペリエンスを持っています。
通常のWeb開発では、簡単に同じようなフレームアニメーションを実現するためにjsやcssを使用することができ、グラフィック環境の公開数の制限のために、唯一のこの効果を達成するためにSVGを使用することができ、巧妙にこの問題を解決するためにアニメートタグの公開数の果実。
イメージの各フレームを別々のレイヤーに配置し、各レイヤーをオーバーラップさせることによって。透明アニメーションを使用して、各イメージフレームの出現時間をコントロールし、連続再生アニメーション効果を作り出します。
<div style="height:0;">
<svg opacity="0" viewBox="0 0 " style="width:100%;background-image:url('img/02.png');background-size:100% auto;background-repeat:none;transform:rotateZ(0deg);">
<animate attributename="opacity" begin="1.3125s" dur="6.25s" values="1; 1; 0; 0;" keytimes="0; 0.2; 1" fill="freeze"></animate>
</svg>
</div>
<div style="height:0;">
<svg opacity="0" viewBox="0 0 " style="width:100%;background-image:url('img/01.png');background-size:100% auto;background-repeat:none;transform:rotateZ(0deg);">
<animate attributename="opacity" begin="1.25s" dur="6.25s" values="1; 1; 0; 0;" keytimes="0; 0.2; 1" fill="freeze"></animate>
</svg>
</div>
原理は理解していますが、全体のアニメーションは70以上のフレームを持って、コピーアンドペーストは明らかに私のためにこのような機知に富んだフロントエンドには適していませんので、合言葉のjavascriptメソッドのうち。
const generateFrames = () => {
const container = document.querySelector('#container')
const totalFrames = 72
let html = ''
for(let i = totalFrames; i > 0; i--) {
const inter = 0.0625
const height = i == 1 ? 'auto' : '0px'
const opacity = i == 1 ? 1 : 0;
const begin = (1.5 + inter * i) + 's'
const dom = `
<div style="height:${height};">
<svg opacity="${opacity}" viewBox="0 0 " style="width:100%;background-image:url('img/${i}.png');background-size:100% auto;background-repeat:none;transform:rotateZ(0deg);">
<animate attributename="opacity" begin="${begin}" dur="6.25s" values="1; 1; 0; 0;" keytimes="0; 0.2; 1" fill="freeze"></animate>
</svg>
</div>
`
html += dom
}
container.innerHTML = html
}
generateFrames()
生成されたコードをコピーし、デベロッパーツールに貼り付けます。
完了しました！
元の住所
