gsap 회전-날카로운 전환을 피하는 방법
카덴자
누군가가 한 방향에서 다른 방향으로의 급격한 전환없이이 스윙을 더 유창하게 만들 수 있도록 도와 줄 수 있습니까? 애니메이션은 바람에 흔들리는 것과 같아야합니다.
const stepDuration = 0.5, wing = '#wing';
gsap.set(wing, {transformOrigin: "50% 0%", rotation: 15})
const walk = () => {gsap.timeline({repeat: -1, defaults: { ease: "circ.inOut", duration: stepDuration }})
.add('start')
.to(wing, { rotation: -15 })
.to(wing, { rotation: 15 })
}
window.onload = () => {walk()};svg {
position: fixed;
left: 50vw;
top: 25px;
width: 70%;
height: 70%;
animation: a01 9s;
background: #0099cc;
}
#wing {
fill: gold;
transform-origin: top center;
animation: awinga 25s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js?v=15"></script>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1280 720">
<path id='wing' d="M100 0 L150 0 L150 300 L100 300 Z" />
</svg>
<script>
</script> 테리 직물
당신이 원하는 것은 기본적으로 시작과 끝에서 점점 가늘어지는 트위닝 / 이징 기능입니다. 갑작스러운 이유는 circ.inOut이징의 경우 기본적으로 그라디언트가 무한한 (50 % 표시에서 바로) 무한히 작은 기간 이 있기 때문입니다. 이로 인해 중간 트위 일 때 볼 수있는 날카로운 깜빡임이 발생합니다. 요소가 수직 중간 선을지나 회전) :
따라서 중간에 급격한 변화가없는 여유 함수를 선택해야합니다. 예를 들면 다음 power1.inOut과 같습니다.
[![power1.inOut은 중간 그라디언트 [2]가 더 완만합니다.](https://i.stack.imgur.com/T7QOi.png)
const stepDuration = 0.5, wing = '#wing';
gsap.set(wing, {transformOrigin: "50% 0%", rotation: 15})
const walk = () => {gsap.timeline({repeat: -1, defaults: { ease: "power1.inOut", duration: stepDuration }})
.add('start')
.to(wing, { rotation: -15 })
.to(wing, { rotation: 15 })
}
window.onload = () => {walk()};svg {
position: fixed;
left: 50vw;
top: 25px;
width: 70%;
height: 70%;
animation: a01 9s;
background: #0099cc;
}
#wing {
fill: gold;
transform-origin: top center;
animation: awinga 25s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js?v=15"></script>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1280 720">
<path id='wing' d="M100 0 L150 0 L150 300 L100 300 Z" />
</svg>
<script>
</script>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
- 이전 게시물：git의 2 개의 다른 브랜치에서 동일한 이름을 가진 2 개의 파일 병합
- 다음 포스트：DateTime 데이터를 날짜 열에 입력하려고하면 날짜 데이터가 두 가지 형식으로되어 있습니다.
관련 기사
Related 관련 기사
- 1
전날 날짜로 회전을 얻는 방법?
- 2
UILabel을 전체적으로 회전하는 방법
- 3
PHP로 SVG를 회전하는 방법
- 4
회전 변경 UIImageView 프레임. 이것을 피하는 방법?
- 5
libgdx-모델 회전 피벗을 설정하는 방법?
- 6
헤드폰에서 스피커로의 전환을 추적하는 방법
- 7
글리프의 세로 중간 또는 중심점 주위에 CSS 회전 전환을 적용하는 방법
- 8
전환을 반대로하는 방법?
- 9
GSAP 클릭시 카드를 다시 회전
- 10
JavaFX 드로잉을 중심으로 회전하는 방법
- 11
Jenkins로 로그 회전을 활성화하는 방법
- 12
RSS 피드가로드되는 동안 장치를 회전 할 때 오류를 방지하는 방법
- 13
Modern OpenGL 및 Python으로 삼각형을 회전하는 방법
- 14
로그 회전 변경 사항을 적용하는 방법
- 15
변형으로 모양을 회전하는 방법
- 16
R ggplot-막대 차트 위에서 카운트를 회전하는 방법
- 17
단축키로 사운드 출력을 전환하는 방법
- 18
SVG 원을 회전하는 방법
- 19
다각형을 회전하는 방법?
- 20
활동 간 전환시 흰색 화면을 피하는 방법
- 21
부드러운 회전을 만드는 방법
- 22
회전하는 스프라이트로 사각형을 회전시키는 방법
- 23
열 사전을 행 사전으로 변환하는 방법?
- 24
Iron Python 사전을 Python 사전으로 변환하는 방법
- 25
Laravel 및 Monlog로 회전 로그 파일을 만드는 방법
- 26
Android Studio : ImageView를 회전 방향으로 이동하는 방법
- 27
운영 체제가 프로세스 전환을 얻는 방법
- 28
SKShapeNode 선을 하단 지점을 중심으로 회전하는 방법
- 29
UISplitViewController : Compact에서 Regular로 회전 할 때 확장을 방지하는 방법
몇 마디 만하겠습니다