Web サイトで使用する必要がある、すべて個々の形状の Illustrator グラフィック (低解像度のスクリーンショットの下) が提供されています。
飛んでいる鳥、人や車の動き、ライトのオン/オフなど、グラフィックのセクションをアニメーション化する必要があります。
問題は、これをどのように行うべきかということです。私は、SVG、CSS、および JQuery アニメーションを調べてきました。これまでのところ、CSS と JQuery を非常に効果的に使用できます。
誰かがブラウザー ウィンドウのサイズを変更したときに (レスポンシブ レイアウト) アニメーションを機能させることができれば素晴らしいと思います。それが SVG を調べ始めた理由です。また、アニメーションがさまざまなブラウザー間で広く互換性を持つ必要があります。
例はありますか？あなたは何をお勧めします？
ありがとう。
編集：
JQuery とキーフレーム アニメーションを使用します。私が使用しているJqueryアニメーション関数は次のとおりです。
function animatethis(targetElement, speed, options, options2) {
$(targetElement).animate(options,
{
duration: speed,
complete: function ()
{
targetElement.animate(options2,
{
duration: speed,
complete: function ()
{
animatethis(targetElement, speed, options, options2);
}
});
}
});
};
使用例:
animatethis($('.big-cloud1'), 40000, {'left': '+=120%'}, {'left': '-=120%'})
また、ブラウザのサイズを変更するときに、個々の画像のサイズを計算しています。これは、全幅でのアニメーションの最大比率に基づいています。
このコードは次のとおりです。
// get main image
var mainImage = $('.main-bg');
// Create new offscreen image to test
var theImage = new Image();
theImage.src = mainImage.attr("src");
// Get accurate measurements from that.
var maxWidth = theImage.width;
jQuery.fn.resizeRatio = function(newHeight){
// work out new ratio
var currentWidth = $('.main-bg').width();
var diff = maxWidth - currentWidth;
var precent = diff / maxWidth;
// get current image width
var currentImage = new Image();
currentImage.src = $(this).attr("src");
var currentWidth = currentImage.width;
// apply new width
$(this).width(currentWidth - (currentWidth*precent))
}
var initAnimation = function(){
$('#animation').imagesLoaded(function(){
$('#animation img').not('.sun, .main-bg').each(function( index ) {
$(this).resizeRatio()
});
});
}
initAnimation()
$(window).resize(function(){
initAnimation()
});