要素画像のミラー反転アニメーション効果をキャンバスに実装する方法

この記事は主に、キャンバス上の要素画像のミラー反転アニメーション効果を実現する方法に関する関連情報を紹介します。内容は非常に優れているので、参考として共有します。

1. キャンバス画像の水平ミラー反転効果のプレビュー

ここをクリックしてください: キャンバス画像の水平ミラー反転アニメーションのデモ

デモページで画像アニメーション効果をクリックしてください。

2. Canvas 上での画像反転の実装

CSS で要素の反転効果を実現するには、たとえば、特定の画像を水平方向に反転したい場合、必要なのは 1 行だけです。 CSS の場合:

img {
    transform: scaleX(-1);
}

または:

img {
    transform: scale(-1, 1);
}

しかし、キャンバスでは、反転できないことが問題なのではなく、座標系の位置が問題になります。

Canvas では、次のコードでリソースの水平ミラー反転を実現できます (コンテキストが Canvas の 2D コンテキストであると仮定します):

context.scale(-1, 1);

または、直接行列変換に setTransform API を使用します:

context.setTransform(-1, 0, 0, 1, 0, 0);

ただし、反転は実装されていますが、キャンバス内の要素 配置には大きな問題があります。これは、Canvas の座標変換システムが CSS の座標変換システムとは異なるためです。そのため、中央反転効果を実現したい場合は、反転する前に対象要素の中心点を変換軸に移動する必要があります。

水平方向の反転距離を取得し、ディスプレイスメント変換後のスケーリング前に水平方向のオフセットを変換すると、中心反転の効果がわかります。

言葉が薄いので写真を見せます。

キャンバスのデフォルトの変更座標系は左上隅です。

したがって、水平スケールが 1、0.5、0、-0.5、-1 の場合、最終的な位置は以下のようになります:

その後、オフセットする必要がある水平距離の式を取得できます:

distance = (canvas.width – image.width * scale) / 2;

最終的に、ミラー描画画像のキーコードは次のようになります(水平ズームサイズがスケールであると仮定):

// 坐标参考调整
context.translate((canvas.width - image.width * scale) / 2, 0);
context.scale(scale, 1);
context.drawImage(image, 0, 0);
// 坐标参考还原
context.setTransform(1, 0, 0, 1, 0, 0);

アニメーション効果を高めるにはどうすればよいですか?

Tween.js (https://github.com/zhangxinxu/tween) を使用できます

それにはさまざまなイージング アルゴリズムがあり、便利な Math.animation() メソッドの助けを借りて、効果を簡単に実現できますラが欲しい！

Math.animation(form, to, duration, easing, callback);

アニメーション JS は次のとおりです:

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// 动画进行
Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding) {
    // 清除画布内容
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 调整坐标
    context.translate((canvas.width - canvas.width * value) / 2, 0);
    // 调整缩放
    context.scale(value, 1);
    // 绘制此时图片
    context.drawImage(eleImg, 0, 0);
    // 坐标参考还原
    context.setTransform(1, 0, 0, 1, 0, 0);
});

3. 結論

また、Canvas のフロントエンド ユーザーは少なく、その読者は人気があるほどではありません。テクノロジー。しかし、古いことわざにあるように、無視するには小さすぎる善行はありません。将来、関連する問題を探すときに友人が助けてくれることを願っています。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

html5 は、canvas を使用して二次ツリー構造図を描画します

canvas は、さまざまな基本グラフィックを描画します

Canvas を使用して、Baidu Tieba クライアントが小さなボールをロードする方法を模倣します

以上が要素画像のミラー反転アニメーション効果をキャンバスに実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。