Mobil inkişafda animasiya: bu nədir, hansı növləri var və necə istifadə olunur

Android-də Animasiya: Property Animation və View Animation

Android iki əsas animasiya sistemi təqdim edir: View Animation (köhnə) və Property Animation (müasir). View Animation (və ya Tween Animation) yalnız vizual təsvirlə işləyir — Görünüşün ekranını dəyişir, lakin onun real xüsusiyyətlərini dəyişmir (məsələn, klik koordinatları yerində qalır). Android 3.0-da təqdim edilmiş Property Animation, Animator — ValueAnimator, ObjectAnimator və ya AnimatorSet vasitəsilə obyektin real xüsusiyyətlərini dəyişir.

ObjectAnimator və ValueAnimator

ObjectAnimator Property Animation-ın ən məşhur sinfidir. Müəyyən bir Interpolator ilə göstərilən vaxt ərzində obyektin xüsusi xüsusiyyətini (məsələn, translationX, alpha, scaleY) animasiya edir.

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator müəyyən bir obyektə bağlı deyil — hər hansı bir xüsusiyyət və ya fərdi məntiq üçün istifadə edilə bilən dəyərlər yaradır.

View Animation və XML animasiyaları

View Animation XML fayllarında res/anim/ təsvir olunur. Dörd növ dəstəklənir: scale, translate, rotate, alpha. Çatışmazlıq animasiyanın real Görünüş parametrlərini dəyişməməsidir. Sadə effektlər üçün (yanıb-sönmə, fırlanma) View Animation hələ də tətbiq olunur, lakin yeni layihələr üçün Property Animation tövsiyə olunur.

Jetpack Compose-da Animasiya

Jetpack Compose müasir animasiya API-si təklif edir: animateAsState, Animatable, AnimatedVisibility və AnimatedContent. Compose-da animasiya reaktivdir: vəziyyət dəyişdikdə animasiya avtomatik başlayır.

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

iOS-da Animasiya: Core Animation və UIView.animate

iOS Core Animation — CALayer ilə işləyən aşağı səviyyəli framework üzərində qurulmuş güclü animasiya yığını təqdim edir. UIKit, Core Animation üzərində rahat UIView.animate və UIViewPropertyAnimator metodları ilə qurulur.

UIView.animate

UIView.animate iOS-da animasiya etməyin ən sadə yoludur. Frame, alpha, transform, backgroundColor və digər UIView xüsusiyyətlərini animasiya etməyə imkan verir.

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — fiziki animasiya üçün framework: qravitasiya, toqquşmalar, yaylar, cazibə qüvvələri. Əl ilə fizika hesablaması olmadan obyektlərin real davranışını yaratmağa imkan verir. Xüsusi keçidlər, animasiya edilmiş menyular və oyun elementləri üçün istifadə olunur.

CAAnimation və Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — CALayer animasiyası üçün aşağı səviyyəli API. 3D transformasiyaları, yol animasiyasını (keyframe), maskalama və kompozisiyanı dəstəkləyir. SwiftUI, animation və withAnimation modifierləri vasitəsilə pərdə arxasında Core Animation-dan istifadə edir.

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

Əksər iOS layihələri üçün SwiftUI daxili animasiyası ilə istifadə olunur. Məsələn, withAnimation vəziyyət dəyişikliklərini animasiya kontekstinə bükür.

Vektor Animasiyası: Lottie və Rive

Mürəkkəb animasiyaları (personajlar, keçidlər, yükləyicilər) kodla həyata keçirmək çətindir. Lottie və Rive, dizaynerlərə vizual redaktorlarda animasiya yaratmağa və tərtibatçılara onları hazır komponent kimi tətbiqə yerləşdirməyə imkan verməklə bu problemi həll edir.

Lottie

Lottie — Airbnb-dən (indiki LottieFiles) JSON formatında ixrac edilmiş Adobe After Effects animasiyalarını göstərən kitabxana. Android, iOS, Flutter, React Native və Web-də dəstəklənir. Lottie animasiyaları vektordur, keyfiyyət itkisi olmadan miqyaslanır və proqramlı şəkildə fərdiləşdirilə bilər (sürət, gedişat, rənglər).

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (əvvəllər 2Dimensions) — vektor animasiyası üçün daha qabaqcıl alət. Lottie-dən fərqli olaraq, Rive interaktiv animasiyanı dəstəkləyir: hallar, tetikler, keçidlər. Animasiya Rive Editor-da yaradılır və tətbiqdə State Machine vasitəsilə idarə olunur. Rive oyun interfeysləri, animasiya olunmuş nişanlar və geribildirimli mürəkkəb keçidlər üçün uyğundur.

IT Sectr-də dekorativ animasiyalar (yükləyicilər, uğurlu əməliyyatlar, boş vəziyyətlər) üçün Lottie-dən və onboarding ekranlarının interaktiv elementləri üçün Rive-dan istifadə edirik. Bu, UIKit və ya Canvas-da əl ilə tətbiqlə müqayisədə animasiya inkişaf müddətini 60% azaldır.

Shared Element Transition və Hero Animation

Shared Element Transition — bir elementin (şəkil, mətn, kart) ekranlar arasında keçid zamanı hamar şəkildə hərəkət etdiyi və çevrildiyi animasiya. Bu, davamlılıq illüziyası yaradır: istifadəçi yeni ekrana "getmir", elementin "içinə düşür".

Android Shared Element Transition

Android-də keçid ActivityOptionsCompat və transitionName atributları vasitəsilə həyata keçirilir. FragmentTransaction Activity daxilində keçidlər üçün addSharedElement-i dəstəkləyir. Compose SharedContentState ilə SharedTransitionLayout istifadə edir.

iOS Hero Transition

iOS-da daxili Hero Transition yoxdur, lakin Hero kitabxanası (Luke Zhao tərəfindən) bu nümunəni UIKit-də tətbiq edir. Sadəcə hər iki ekrandakı elementlərə id təyin edin — Hero avtomatik olaraq hamar keçid yaradacaq. SwiftUI-də keçid animasiyası NavigationStack və matchedGeometryEffect vasitəsilə daxilidir.

Flutter Hero

Flutter tag parametri ilə daxili Hero vidcetinə malikdir. İki səhifə eyni tag ilə Hero ehtiva etdikdə, Flutter avtomatik olaraq aralarındakı keçidi animasiya edir. Bu, mobil tətbiqdə mürəkkəb animasiyanı həyata keçirməyin ən sadə yollarından biridir.

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator və Easing

Animasiyanın təbii görünməsi üçün sürət əyriləri istifadə olunur — Android-də Interpolator və iOS-da Easing. Onlar animasiya sürətinin əvvəldən sona necə dəyişdiyini müəyyən edir.

Android Interpolator-ları

Android bir neçə daxili Interpolator dəstəkləyir: LinearInterpolator (vahid), AccelerateDecelerateInterpolator (yavaş-sürətli-yavaş), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (həddi aşma ilə) və BounceInterpolator (sıçrayışla). Xüsusi Interpolator XML və ya TimeInterpolator sinfi vasitəsilə yaradıla bilər.

Spring Animation

Spring Animation (yay animasiyası) damping (söndürmə) və stiffness (sərtlik) parametrləri ilə yay fizikasını modelləşdirir. Damping 0 — sonsuz rəqslər, 1 — rəqs yoxdur. Sərtlik qayıdış sürətini müəyyən edir. Spring Animation iOS-da (UISpringTimingParameters ilə UIViewPropertyAnimator), Android-də (physics2-dən SpringAnimation) və SwiftUI-də (spring()) mövcuddur.

Android-də Spring Animation sənədləşməsi ətraflı konfiqurasiya nümunələrini ehtiva edir.

Zaman xətti animasiyası

Timeline (zaman xətti) — animasiyanın zamanla çərçivələrə bölündüyü yanaşma. AnimationSet və ya Qrup animasiyasının kifayət qədər çevik olmadığı mürəkkəb ardıcıllıqlar üçün istifadə olunur. Android AnimatorSet-i, iOS — CAAnimationGroup-u, Flutter — AnimationController-da Interval-i dəstəkləyir.