Curve

Curves sınıfı ile zamanlama eğrisi seçmeyi öğrenirsin.

Curves sınıfı

Curves sınıfı, animasyonun zamanlama eğrisini seçmeni sağlar. Curves.easeIn yavaştan başlar, Curves.easeOut yavaş biter, Curves.easeInOut hem yavaş başlar hem yavaş biter. Bu eğriler animasyonun doğal hissettirmesini sağlar.

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeInOut,
  width: 200,
)

curve parametresi varsayılan olarak Curves.linear kullanır.

curve parametresi

curve parametresi AnimatedContainer ve diğer animasyonlu widget'larda bulunur. Bu parametreye Curves.easeInOut gibi bir değer verirsen, animasyonun zamanlaması bu eğriye göre şekillenir. Doğrusal geçiş yerine eğri kullanmak, animasyonu daha doğal yapar.

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeOut,
  width: 200,
)

Uygulama Curves ile animasyon

Bir StatelessWidget olan Ornek tanımla. build metodu bir AnimatedContainer döndürsün; duration Duration(seconds: 1), curve Curves.easeInOut, width 200 olsun. main içinde 'hazir' yazdır.

Örnek çözümü göster

import 'package:flutter/material.dart';

class Ornek extends StatelessWidget {
  const Ornek({super.key});

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(seconds: 1),
      curve: Curves.easeInOut,
      width: 200,
    );
  }
}

void main() {
  print('hazir');
}

Kendini test et

Hangisi geçerli bir Curves değeridir?
- Curves.slowIn
- Curves.quickIn
- Curves.hardOut
- Curves.easeIn
Cevabı göster

Curves.easeIn — Curves.easeIn geçerli bir eğridir. slowIn, quickIn ve hardOut Curves sınıfında tanımlı değildir; doğru adlar easeIn, easeOut ve easeInOut'dur.

curve parametresi

AnimatedContainer(
  duration: const Duration(seconds: 1),
  ____: Curves.easeInOut,
  width: 200,
)

Cevabı göster

AnimatedContainer(
  duration: const Duration(seconds: 1),
  curve: Curves.easeInOut,
  width: 200,
)

Curves parçaları

Curves.easeIn

yavaş başlayan eğri
Curves.easeOut

yavaş biten eğri
Curves.easeInOut

iki ucu yavaş eğri
Curves.linear

sabit hızlı eğri

Sıradaki ders: Özet - Animasyon temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler