WeChat 애플릿을 사용하여 로그인 페이지에서 떠다니는 구름 애니메이션 효과에 대한 자세한 그래픽 및 텍스트 설명-미니 프로그램 개발-php.cn

WeChat 애플릿을 사용하여 로그인 페이지에서 떠다니는 구름 애니메이션 효과에 대한 자세한 그래픽 및 텍스트 설명

黄舟

풀어 주다： 2017-05-07 11:59:25

원래의

3003명이 탐색했습니다.

현재 WeChat 미니 프로그램이 매우 인기가 있다는 것은 말할 필요도 없습니다. 저는 최근 여가 시간을 활용하여 동적 로그인 페이지 효과를 구현했습니다. 따라서 다음 기사에서는 주로 WeChat mini의 사용 방법을 소개합니다. 구름 위에 떠있는 로그인 페이지를 구현하는 프로그램 애니메이션 관련 정보, 필요한 친구들이 참고할 수 있도록 아래에서 살펴보겠습니다.

서문

2017년에는 프론트엔드가 인기를 끌었고 위챗 미니프로그램, 위엑스, 리액트네이티브, 심지어 알리페이까지 미니 프로그램도 시작했는데, 항상 이것이 원래 파괴의 리듬이라고 느끼고, 파도가 닥쳤을 때에도 열기를 활용하겠습니다.

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

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

지식

애니메이션의 이해

애니메이션 속성은 6개의 애니메이션 속성

value td>를 설정하기 위한 단축 속성입니다.

설명

animation-name

선택기에 바인딩되어야 하는 키프레임 이름을 지정합니다.

animation-duration

애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초 단위로 지정합니다.

animation-timing-function

애니메이션의 속도 곡선을 지정합니다.

animation-delay

애니메이션이 시작되기 전 지연 시간을 지정합니다.

animation-iteration-count

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

다음을 지정합니다. 애니메이션은 횟수

애니메이션-방향으로 재생되어야 합니다.

td>

애니메이션을 차례로 역방향으로 재생할지 여부를 지정합니다.

번역을 알 수 있는 방법은 여러 가지가 있습니다.

이 글에서는 주로 2를 사용합니다.

translate3d(x,y,z)
3D 스케일링 변환을 정의합니다.
rotate3d(x,y,z,angle)
3D 회전을 정의합니다.

translate3d(1,1,0)<br>translate3d(1,1,0)

(왼쪽 및 오른쪽, 위 및 아래, 크기)가 변경됩니다.

rotate3d(1,1,0,45deg)

달성

1. 두 구름은 크기와 초기 위치만 다릅니다.

.cloud {
 position: absolute;
 z-index: 3;
 width:99px;height:64px; top: 0; 
 right: 0;
 bottom: 0;
 animation: cloud 5s linear infinite;
}

@keyframes cloud {
 from {
 transform: translate3d(-125rpx, 0, 0);
 }

 to {
 transform: translate3d(180rpx, 0, 0);
 }
}

로그인 후 복사

그 중 rpx는 위챗의 고유한 속성으로 안드로이드의 dp 단위와 마찬가지로 화면 크기에 영향을 받지 않습니다. 키프레임은 일정한 속도로 이동하는데, CSS를 보면 왼쪽과 오른쪽 방향만 바뀌는 것을 볼 수 있습니다.

2. 원래는 아바타에 매달린 바구니를 추가해서 그네처럼 흔들리게 만들고 싶었는데, 그냥 떠다니는 애니메이션을 임의로 만들었습니다.

코드는 다음과 같습니다

@keyframes pic {
 0% {
 transform: translate3d(0, 20rpx, 0) rotate(-15deg);
 }
 15% {
 transform: translate3d(0, 0rpx, 0) rotate(25deg);
 }
 36% {
 transform: translate3d(0, -20rpx, 0) rotate(-20deg);
 }
 50% {
 transform: translate3d(0, -10rpx, 0) rotate(15deg);
 }
 68% {
 transform: translate3d(0, 10rpx, 0) rotate(-25deg);
 }
 85% {
 transform: translate3d(0, 15rpx, 0) rotate(15deg);
 }
 100% {
 transform: translate3d(0, 20rpx, 0) rotate(-15deg);
 }
}

로그인 후 복사

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

요약

CSS에는 여전히 많은 애니메이션과 특수 효과가 있다고 말씀드리고 싶습니다. WeChat 애플릿에 약간의 애니메이션을 추가하면 됩니다. 페이지를 좀 더 가볍게 아름다움의 관점으로 만들어 보세요. 물론 더 복잡한 애니메이션은 기회가 주어졌을 때만 업데이트

할 수 있습니다.

위 내용은 WeChat 애플릿을 사용하여 로그인 페이지에서 떠다니는 구름 애니메이션 효과에 대한 자세한 그래픽 및 텍스트 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!