Tween ve CurvedAnimation

CurvedAnimation ile yumuşak eğri animasyonu öğrenirsin.

Tween ve CurvedAnimation

Tween, başlangıç ve bitiş değerleri arasında ara değer üretir; AnimationController'dan gelen 0.0-1.0 ilerlemesini gerçek değerlere dönüştürür. CurvedAnimation, bu ilerlemeyi bir Curves eğrisiyle yumuşatır.

final tween = Tween(begin: 0.0, end: 100.0);
final curved = CurvedAnimation(
  parent: ctrl,
  curve: Curves.easeInOut,
);
final value = tween.transform(curved.value);

Curves seçimi

Curves sınıfı farklı yumuşatma eğrileri sunar: Curves.linear düz, Curves.easeIn yavaş başlayan, Curves.bounceOut zıplayan. CurvedAnimation'ı Tween ile birlikte kullanarak hem değer aralığını hem de yumuşatmayı kontrol edersin.

Uygulama Tween ve CurvedAnimation kullan

_EmptyVsync sınıfını tanımla. main içinde ctrl adlı AnimationController oluştur (vsync: _EmptyVsync(), duration 1 saniye). CurvedAnimation ile ctrl'yi Curves.easeIn ile sar. Tween(begin: 0.0, end: 100.0)'in transform'una curved.value ver ve sonucu yazdır.

Örnek çözümü göster

import 'package:flutter/material.dart';

class _EmptyVsync implements TickerProvider {
  @override
  Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}

void main() {
  final ctrl = AnimationController(
    vsync: _EmptyVsync(),
    duration: Duration(seconds: 1),
  );
  final curved = CurvedAnimation(parent: ctrl, curve: Curves.easeIn);
  final tween = Tween(begin: 0.0, end: 100.0);
  print(tween.transform(curved.value));
  ctrl.dispose();
}

Kendini test et

CurvedAnimation ne işe yarar?
- Animasyonu durdurur
- Belleği temizler
- Widget rengini ayarlar
- Doğrusal ilerlemeyi bir eğriyle yumuşatır
Cevabı göster

Doğrusal ilerlemeyi bir eğriyle yumuşatır — CurvedAnimation, controller'ın doğrusal 0.0-1.0 ilerlemesini bir Curves eğrisiyle dönüştürerek yumuşak hareket sağlar.

CurvedAnimation'a parent ver

final curved = CurvedAnimation(
  ____: ctrl,
  curve: Curves.easeInOut,
);

Cevabı göster

final curved = CurvedAnimation(
  parent: ctrl,
  curve: Curves.easeInOut,
);

Tween ve CurvedAnimation eşleşmeleri

Tween

Başlangıç ve bitiş değerleri
CurvedAnimation

Eğriyle yumuşatır
Curves.easeInOut

Yavaş başlayıp biten eğri
parent

Kaynak animasyon

Sıradaki ders: Hero animasyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler