집 >웹 프론트엔드 >H5 튜토리얼 >캔버스에 요소 그림 거울 뒤집기 애니메이션 효과를 구현하는 방법

캔버스에 요소 그림 거울 뒤집기 애니메이션 효과를 구현하는 방법

不言원래의: 2018-07-03 11:15:273898검색

이 글은 캔버스에 요소 그림의 거울 뒤집기 애니메이션 효과를 구현하는 방법에 대한 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 지금 공유하겠습니다.

1. 캔버스 그림의 수평 거울 뒤집기 효과 미리보기

여기를 클릭할 수 있습니다: 캔버스 그림 수평 대칭 뒤집기 애니메이션 데모

데모 페이지에서 그림 애니메이션 효과를 클릭하면 볼 수 있습니다.

2. 캔버스에서 이미지 뒤집기 구현

CSS에서 요소의 뒤집기 효과를 얻으려면 비교적 간단합니다. 예를 들어 특정 이미지를 가로로 뒤집으려면 한 줄만 있으면 됩니다. of CSS:

img {
    transform: scaleX(-1);
}

또는:

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

하지만 캔버스에서는 좀 더 번거롭습니다. 문제는 뒤집을 수 없다는 것이 아니라 좌표계의 위치입니다.

캔버스에서 다음 코드는 리소스의 수평 미러 뒤집기를 달성할 수 있습니다(컨텍스트가 캔버스의 2D 컨텍스트라고 가정).

context.scale(-1, 1);

또는 직접 행렬 변환을 위해 setTransform API를 사용합니다.

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

그러나 뒤집기가 구현되더라도 Canvas의 요소 위치 지정에 큰 문제가 있습니다. 이는 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

여기에는 다양한 easing 알고리즘이 있으며 편리한 Math.animation() 메서드를 사용하면 쉽게 효과를 얻을 수 있습니다. 우리는 라를 원해요!

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

애니메이션 JS는 다음과 같습니다.

var canvas = document.querySelector(&#39;canvas&#39;);
var context = canvas.getContext(&#39;2d&#39;);
// 动画进行
Math.animation(1, -1, 600, &#39;Quad.easeInOut&#39;, 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. 결론

또 다른 콜드 기사는 캔버스의 프런트 엔드 사용자가 많지 않고 대중도 제한되어 있습니다. 기술. 그러나 옛말처럼 소홀히 할 수 없을 만큼 작은 선행은 없습니다. 앞으로 관련 문제를 찾을 때 친구들이 도움을 줄 수 있기를 바랍니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

캔버스에 요소 그림 거울 뒤집기 애니메이션 효과를 구현하는 방법

관련 기사