머리말

2017년에는 프론트엔드가 대세, 위챗애플릿, 위엑스 , 리액트네이티브, 알리페이도 미니 프로그램을 출시했다. 나는 이것이 네이티브 파괴의 리듬이라고 항상 느끼기 때문에 파도가 닥칠 경우에 탑승할 것이다.

위 렌더링(GIF 애니메이션)

이 배경 이미지를 보자마자 강박장애가 느껴지더라구요. 왜 구름이 움직이지 않아서 문제의 물결이 시작되었습니다.

지식

애니메이션의 이해

애니메이션 속성은 6가지 애니메이션 속성을 설정하는 데 사용되는 약어 속성입니다.

번역을 아는 방법은 여러 가지가 있습니다

, 이 글에서는 주로 2를 사용합니다.
+translate3d(x,y,z)는 3D 스케일링 변환을 정의합니다.
+rotate3d(x,y,z,angle)은 3D 회전을 정의합니다.

translate3d(1,1,0)
(좌우, 상하, 크기)가 변한다고 이해하시면 됩니다.
rotate3d(1,1,0,45deg)

구현

2개의 클라우드는 크기와 초기 위치만 다릅니다. .

.cloud {

위치: 절대;

z-index: 3;

너비:99px;높이:64px; 상단: 0;

오른쪽: 0;

하단: 0;

애니메이션: cloud 5s 선형 무한;

}

@keyframes cloud {

from {

변환: 번역3d(-125rpx, 0, 0);

}

~{

변환:translate3d(180rpx, 0, 0);

}

}

여기서 rpx는 WeChat의 고유한 속성이며 화면 크기의 영향을 받지 않습니다. Android의 DP 장치. 키프레임은 일정한 속도로 이동하는데, CSS를 보면 왼쪽과 오른쪽 방향만 바뀌는 것을 볼 수 있습니다.
2. 원래는 아바타에 매달린 바구니를 추가해서 그네처럼 흔들리게 만들고 싶었는데, 그냥 떠다니는 애니메이션을 임의로 만들었습니다.

코드는 다음과 같습니다.

@키프레임 사진 {  0% {    변환: translate3d(0, 20rpx, 0) 회전(-15deg);  }  15% {    변형: translate3d(0, 0rpx, 0) 회전(25deg);  }  36% {    변환: translate3d(0, -20rpx, 0 ) 회전(-20도);  }  50% {    변환: translate3d(0, -10rpx, 0 ) 회전(15도);  } 68% { 변형: translate3d(0, 10rpx, 0) 회전(-25도) } 85% { 변형: translate3d(0, 15rpx, 0) 회전(15도) } 100% { 변형: translate3d(0, 20rpx, 0) 회전(-15도) }}

키프레임이 에서 까지 뿐만 아니라 퍼센트까지 지원할 줄은 몰랐는데 좋네요. 여기에서 계층 관계, 애니메이션 지속 시간 및 투명도를 제어하는 ​​한 구름 부동을 달성할 수 있습니다.

요약

CSS에는 여전히 많은 애니메이션과 특수 효과가 있습니다. WeChat 애플릿에 약간의 애니메이션을 추가하면 페이지가 더 아름다워질 수 있습니다. 물론 더 복잡한 애니메이션은 기회가 주어졌을 때만 업데이트할 수 있습니다.