프런트 엔드 개발, 참조 애니메이션에서, 우리가 할 수있는 :
- DOM 직접 애니메이션.
- 사용은 애니메이션을 달성하기 위해 캔버스.
- SVG는 애니메이션을 달성하기 위해 사용합니다.
- 직접 행동의도에 지프.
- (가) 구현 사용하여 그림 프레임 애니메이션.
- ...
애니메이션의 모든 기본적인 원리는 : 단시간에 대응하는 화상을 표시하기 위해, 연속, 시각의 '이동'으로 표시되도록. 이 논문은 주로 4시 5:00의 이야기.
그림 프레임 애니메이션
우리는 더 복잡한 애니메이션 효과를 달성하고자하고, 개발 일정이 애니메이션 GIF의 액션 피규어로, 꽉 상황 옆에 때 용액에서 좋은 결과를 달성하기 위해 가장 낮은 비용이다. 예를 들면 다음과 같은이 애니메이션 효과 :
우리는 동적 효과 언젠가 일시 정지를 원하는 경우에, 시간이 지나면 시간에 다음 GIF 사실이 아니다 그리기에 의해, 브레이크 포인트의 동적 효율에서 계속 재생. 동적 효율성의 GIF 그림은 일시 정지 할 수있는 방법입니다 . 이번에는 사진 프레임 애니메이션을 사용하는 것이 좋습니다.
그림 프레임 애니메이션을 볼 수 있습니다 : 다시 코드에 구현 된 프론트 엔드의 원칙 GIF 그림을.
(가정)이 상기 가동 효율, 즉, 제어 코드 (100 개)와 이미지 (100 개) 및 영상 순차 표시 (100)로 분할 될 수있다. 또한, 중간에 일시 정지 할 수 있습니다. HTTP 요청 스프라이트 화상의 합성은,도 100, 다음 배경 위치도에 표시하는 제어를 저장한다. 아주 좋은 이미지 생성 도구 추천 : GKA를
나는 수직 그리기 스프라이트 생성 (100 개) 사진을 찍었다.
코드에서 만이 DOM 요소를 애니메이션 할 수있는 배경 위치를 업데이트해야합니다.
첫째 주에 제 1 점 : 위치는 배경 집합이다 DOM 요소에 대한 배경 이미지의 시작 위치.
DOM 요소 및 가정 픽처 폭과 높이가 100 * 200 인
专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
--- css
#wrapper {
width: 100px;
height: 200px;
background-image: url('雪碧图.png');
background-size: 100% 10000%; // 有100张图， 100*100
background-repeat: no-repeat;
}
--- js
var domEl = document.querySelector('#wrapper');
var n; // n：显示雪碧图中第几张图片，n >=0 && n<100
domEl.style.backgroundPosition = `0px ${-n*200}px`; // 注意这里是负值라인에 N의 우리는 JS 필요한 제어 값, 그것은 쉽게 달성 할 수 있는 실행, 정지 효과에 .
고정되어 있지 않은 경우, 원하는 적응성 화상 비율에 따라 필요한 경우, 위의 예에서, 고 DOM 소자 폭이 고정되면, 종횡비가 패딩에 의해 설정된 정상 DOM 요소이다. 이번에는 배경 위치에서뿐만 아니라 특정 값을 사용하고, 비율의 사용을 필요로 할 수 없다. 참고로 장소가있다 :
배경 위치 값의 비율은, 그 오프셋 최종의 비율을 곱함으로써 얻을 수있다 배경 화상의 폭과 높이의 직접적인 사용하지만, 실제로는 아니라고 생각 당연하다. 다음과 같이 계산된다 :
x偏移量 = (元素宽度—背景图片的宽度)*x百分比
y偏移量 = (元素高度—背景图片的高度)*y百分比변환보기 :
x百分比 = x偏移量 / (元素宽度 - 背景图片宽度)
y百分比 = y偏移量 / (元素高度 - 背景图片高度)상기 인의 구체적인 예 :
// 假设每一张小图片宽度为w, 高度为h, 当前需要展示第n张图片，一共有100张图，则
var xPercent = 0;
var yPercent = -hn / (h - 100h) * 100 = n / 99 * 100;
domEl.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
결국, 우리는 사진 프레임 애니메이션을 얻을 수 있습니다. 완전히 JS의 도움없이 애니메이션 효과를 제어하지 않으면 물론, CSS를 직접 사용할 수 있습니다. GIF 또는 직접 이동도 등.
CSS의 곡선 운동
곡선 운동, 사용 SVG는 캔버스는 아주 좋은 선택입니다. 그러나 때 곡선 덜 엄격한 요구 사항의 경로, SVG 캔버스와 아마 약간의 문제의 사용. 직접 운동 "으로 곡선이 나타납니다"는을 달성하기 위해 CSS를 사용할 수 있습니다.
포물선과 유사한 운동은, 예를 들어, 아마도 하나의 효과 :
변위 곡선상의 점의 접선 속도이고, 속도와 속도는, X 축 및 Y 축 속도로 분해 될 수있다. 즉, 상기 이동은 x 축으로의 이동 방향과 수직의 Y 축 방향의 수평 이동으로 분해 될 수있다. y 축 운동이 빠르게 성장하는 동안 감각에서 어려운 일이 아니다, x 축 운동이 아마 균일 볼 수 있습니다.
또한, 양 방향으로의 이동의 분해로 인해 두 DOM을 필요로하는 스포츠는, 애니메이션의 최종 효과를 달성하기 위해 작성된되었다.
--- html
<div class='x-container'>
<div class='y-container'></div>
</div>
--- css
.x-container {
width: 50px;
height: 50px;
animation: xMove 2s linear;
}
.y-container {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000;
animation: yMove 2s cubic-bezier(.98,.03,.91,.77);
}
@keyframes xMove {
0% {
}
100% {
transform: translateX(400px);
}
}
@keyframes yMove {
0% {
}
100% {
transform: translateY(400px);
}
}인 두 방향으로 함께 운동 상기 효과.
덜 엄격한 곡선 운동, 직접 사용 CSS 애니메이션을 달성하고자하는, 또한 좋은 선택입니다.
뒷면에 글
본 논문은 인스턴스 액자 애니메이션 곡선 운동을 달성하기위한 종속 CSS 요약이다.