이런 종류의 애니메이션을 만드는 구체적인 방법이 있는지 알고 싶습니다.
회전 축 X : https://gyazo.com/78c66d5cd8fc0bcb5ab2e0c3ddb77508
캔버스 2d로 할 수 있거나 비슷한 것을 재현 할 수 있습니까?
감사합니다
캔버스 2d로 할 수 있거나 비슷한 것을 재현 할 수 있습니까?
예, 2D 캔버스에서이 효과를 얻을 수 있습니다. 그러나 바닐라 JS에서이를 수행하려면 엄청난 코딩이 필요합니다.
한 가지 방법은 기존의 보이는 캔버스에서 애니메이션을 적용 할 장면을 생성하는 두 번째 숨겨진 캔버스를 만드는 것입니다. 그런 다음 숨겨진 캔버스를 1px 높이의 행 단위로 표시되는 캔버스에 복사하여 적절한 대상 x, y 및 너비 값을 계산하여 3D 효과를 에뮬레이트해야합니다. 그러나 결과에는 종종 물결 무늬 효과 ( https://en.wikipedia.org/wiki/Moir%C3%A9_pattern )가 포함됩니다.이를 제거하는 가장 간단한 방법은 원치 않는 간섭이 발생할 때까지 보이는 캔버스를 매우 부드럽게 흐리게하는 것입니다. 패턴이 사라집니다.
분명히 위의 방법은 이상적인 솔루션이 아닙니다. WebGL 캔버스를 사용할 수 있다면 효과를 훨씬 쉽게 생성 할 수있는 3D 캔버스 라이브러리 (예 : three.js)를 사용할 수 있습니다. 여기에 다른 답변에서 설명한 것처럼 CSS 접근 방식이 더 나은 솔루션이 될 것입니다!
2D 캔버스에서 멀어 질 수 없다면 Scrawl-canvas JS 라이브러리를 사용하여 효과를 얻을 수 있습니다 (면책 조항 :이 라이브러리를 유지합니다) . 여기에서 예를 참조하십시오 : https : //scrawl-v8.rikweb. org.uk/demo/dom-015.html
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다