Mô tả

Animations are fundamental to user experience. When it comes to building a mobile app they have been generally difficult and cumbersome to add.
Now with the power of React Native and the Animated library, enhancing your applications experience has been easier than ever!

In this course we'll start by walking through all of the functions and animation types that you can leverage with React Native.
We'll step it up to some advanced topics live interpolating colors, rotations, using extrapolate, .99 cliffs, interrupted animations and many more concepts.
After that we'll learn how Animated actually works and rebuild some custom animations using d3-interpolate and other libraries to animate SVG paths.

Finally we get to the real world. We'll use our new found knowledge of Animated to breakdown animations into their pieces, and then rebuild them with the Animated library.

Overall you'll emerge with a new found understanding of animations in general, but the skills to be able to build any animation you want with React Native and Animated.

Bạn sẽ học được gì

How to use Animated, understand how Animated works, how to breakdown animations, and how to build complex animations

Yêu cầu

  • You should be able to create a React Native component, and understand basic layout

Nội dung khoá học

13 sections

Introduction

3 lectures
Introduction
00:42
Why You Should Animate
00:53
LayoutAnimation vs Animated
01:08

Animating Properties

19 lectures
Intro
00:21
Basic Animated and Animated.timing
00:54
Opacity
04:47
Opacity Explanation
00:54
Translate Position
03:05
Translate Position Explanation
01:17
Scale
02:42
Scale Explanation
02:09
Width/Height Values
02:27
Width/Height Values Explanation
01:46
Absolute Position
02:31
Absolute Position Explanation
00:43
Interpolation
00:38
Color/Background Color
04:57
Color/Background Color Explanation
00:15
Rotation
02:58
Rotation Explanation
00:20
Width/Height Percentage
02:05
Width/Height Percentage Explanation
00:33

Animated.Value Functions

3 lectures
Explanation
03:14
Easing
01:25
Easing Explanation
00:52

Animated Functions

18 lectures
Timing
00:13
Spring
03:58
Spring Explanation
00:47
Loop
00:52
Event
02:47
Event Explanation
00:56
Decay
08:32
Decay Explanation
00:15
Math
00:37
Add
01:43
Add Explanation
00:15
Divide
00:58
Divide Explanation
00:05
Multiply
01:12
Multiply Explanation
00:05
Modulo
01:27
Modulo Explanation
00:28
Formulas
00:09

Combining Animations

10 lectures
Intro
00:20
Parallel
03:05
Parallel Explanation
00:41
Sequence
01:50
Sequence Explanation
00:25
Stagger
01:28
Stagger Explanation
00:24
Delay
02:34
Delay Explanation
00:18
Combining Multiple Combined Animations
00:26

Interpolation

8 lectures
Numbers And Interpolates on Interpolates
05:03
Numbers And Interpolates on Interpolates Explanation
03:27
Color/Background Color
02:39
Color/Background Interpolate Explanation
00:57
Rotation
02:21
Rotation Explanation
00:41
Extrapolate
03:47
Extrapolate Explanation
03:54

Native Animations

2 lectures
Video
03:20
Explanation
01:21

Gestures and Animations

1 lectures
Maintain Touchable Items with a Parent PanResponder in React Native
05:36

Understanding How Animated Works

13 lectures
Animated Internals
06:46
createAnimatedComponent
02:50
createAnimatedComponent Explanation
00:34
Using and Understanding setNativeProps
03:00
Using and Understanding setNativeProps Explanation
02:00
Using d3-interpolate with Animated
03:22
Using d3-interpolate with Animated Explanation
01:23
Using d3-interpolate-path and Animated to Animate Simple SVG Paths
02:14
Using d3-interpolate-path and Animated to Animate Simple SVG Paths Explanation
01:04
Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths
02:27
Using Art, Morph.Tween, and Animated to Animate Complex SVG Paths Explanation
01:21
Using Flubber and Animated for Better SVG Path Morphing
01:25
Using Flubber and Animated for Better SVG Path Morphing
01:06

Animated Techniques

8 lectures
Intro
00:38
.99 cliff
06:55
.99 Cliff Explanation
01:04
Animate Hidden
06:47
Animate Hidden Explanation
03:05
Interrupted Animation
02:07
Pointer Events
02:50
Pointer Events Explanation
01:59

Basic Real World

19 lectures
4 Corners Breakdown
01:22
4 Corners
06:42
4 Corners Explanation
03:06
Staggered Heads Breakdown
03:19
Staggered Heads
11:30
Staggered Heads Explanation
03:38
Kitten Cards Breakdown
05:32
Kitten Cards
25:46
Kitten Cards Explanation
10:07
Stagger Form Items Visibility on Mount Breakdown
01:30
Stagger Form Items Visibility on Mount
07:07
Stagger Form Items Visibility on Mount Explanation
04:03
Animated Progress Bar Button Breakdown
01:13
Animated Progress Bar Button
08:45
Animated Progress Bar Explanation
04:12
Dynamic Animated Notifications
07:28
Animated Questionnaire with Progress Bar Breakdown
02:24
Animated Questionnaire with Progress Bar
16:06
Animated Questionnaire Explanation
05:30

Advanced Real World

21 lectures
Photo Grid Shared Element Breakdown
02:01
Photo Grid Shared Element
30:34
Photo Grid Shared Element Explanation
07:45
Animated Color Picker Breakdown
03:04
Animated Color Picker
24:18
Animated Color Picker Explanation
06:37
Floating Action Button with Menu Breakdown
01:02
Floating Action Button with Menu
19:06
Floating Action Button with Menu Explanation
04:18
Application Intro Screen Breakdown
03:18
Application Intro Screen
20:43
Application Intro Screen Explanation
04:54
Evolving Write Button Breakdown
04:12
Evolving Write Button
24:04
Evolving Write Button Explanation
05:06
Create a Social Comment Modal with Animated Swipe Away
08:33
Create a Horizontal Parallax ScrollView
09:57
Tap to Show Love Floating Hearts
07:14
Bouncing Heart Shaped Like Button on Press
04:25
Exploding Heart Button
06:18
Expanding Notify Input with Success Message
07:07

Ending

1 lectures
End
00:26

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.