Animasi Tersirat
Laksanakan animasi tersirat menggunakan widget seperti `AnimatedContainer` dan `AnimatedOpacity` untuk peralihan yang lancar dan automatik.
Animasi Tersirat ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.
Animasi Mudah dengan Widget Implisit
Flutter menawarkan cara mudah untuk menambahkan animasi lancar pada apl anda: Animasi Implisit. Ini ialah animasi "tetapkan dan lupakan", iaitu anda hanya memberitahu Flutter keadaan akhir yang dikehendaki dan Flutter mengendalikan peralihannya.
Anda tidak perlu mengurus pengawal animasi atau pendengar. Hanya ubah sifat, dan Flutter akan menganimasikannya untuk anda!
Rahsia di Sebalik Animasi Implisit
Apabila anda menggunakan widget animasi implisit, anda memberikan nilai baharu untuk salah satu sifatnya yang dianimasikan (seperti saiz atau warna). Kemudian, Flutter mengira peralihan antara nilai lama dengan nilai baharu secara automatik sepanjang duration yang ditetapkan.
Ia seperti memberitahu Flutter: "Pergi dari A ke B dalam 500 milisaat." Flutter mengira semua langkah di antaranya.
Menganimasikan Saiz dan Warna dengan Container
AnimatedContainer ialah salah satu widget implisit yang paling serba boleh. Ia menganimasikan perubahan pada sifat seperti width, height, color, alignment dan decoration secara automatik.
Anda hanya perlu mengemas kini keadaan dengan nilai baharu, dan AnimatedContainer akan menguruskan selebihnya!
Cuba AnimatedContainer
Ketik bekas di bawah! Perhatikan bagaimana saiz dan warnanya berubah secara lancar. Kita hanya mengubah sifatnya dan memanggil setState, manakala AnimatedContainer mengendalikan animasi tersebut.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AnimatedContainer Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const AnimatedContainerScreen(),
);
}
}
class AnimatedContainerScreen extends StatefulWidget {
const AnimatedContainerScreen({super.key});
@override
State<AnimatedContainerScreen> createState() => _AnimatedContainerScreenState();
}
class _AnimatedContainerScreenState extends State<AnimatedContainerScreen> {
double _width = 100.0;
double _height = 100.0;
Color _color = Colors.blue;
BorderRadiusGeometry _borderRadius = BorderRadius.circular(8.0);
void _updateContainer() {
setState(() {
_width = _width == 100.0 ? 200.0 : 100.0;
_height = _height == 100.0 ? 150.0 : 100.0;
_color = _color == Colors.blue ? Colors.red : Colors.blue;
_borderRadius = _borderRadius == BorderRadius.circular(8.0)
? BorderRadius.circular(50.0)
: BorderRadius.circular(8.0);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('AnimatedContainer')),
body: Center(
child: GestureDetector(
onTap: _updateContainer,
child: AnimatedContainer(
width: _width,
height: _height,
decoration: BoxDecoration(
color: _color,
borderRadius: _borderRadius,
),
alignment: Alignment.center,
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
child: const Text(
'Tap me!',
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
}Memudarkan Widget dengan AnimatedOpacity
Widget AnimatedOpacity sesuai untuk memaparkan atau menyembunyikan bahagian UI anda secara lancar. Widget ini menganimasikan perubahan pada sifat opacitynya.
Kelegapan 0.0 bermaksud telus sepenuhnya (tidak kelihatan), manakala 1.0 bermaksud legap sepenuhnya (kelihatan).
Lihat AnimatedOpacity Beraksi
Perhatikan teks muncul dan hilang secara beransur-ansur dengan peralihan yang lancar. Kita hanya menogol keadaan boolean dan mengemas kini nilai kelegapan berdasarkan keadaan itu.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AnimatedOpacity Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const AnimatedOpacityScreen(),
);
}
}
class AnimatedOpacityScreen extends StatefulWidget {
const AnimatedOpacityScreen({super.key});
@override
State<AnimatedOpacityScreen> createState() => _AnimatedOpacityScreenState();
}
class _AnimatedOpacityScreenState extends State<AnimatedOpacityScreen> {
bool _isVisible = true;
void _toggleVisibility() {
setState(() {
_isVisible = !_isVisible;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('AnimatedOpacity')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedOpacity(
opacity: _isVisible ? 1.0 : 0.0,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
child: const Text(
'Hello Flutter!',
style: TextStyle(fontSize: 24),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _toggleVisibility,
child: Text(_isVisible ? 'Hide Text' : 'Show Text'),
),
],
),
),
);
}
}Melakukan Peralihan Silang Widget dengan Lancar
Apabila anda perlu beralih antara dua widget berbeza dengan kesan pemudaran yang lancar, AnimatedCrossFade ialah pilihan yang sesuai. Widget ini bagus untuk memaparkan keadaan yang berbeza, seperti pemutar pemuatan yang bertukar menjadi kandungan.
Anda memberikan firstChild dan secondChild, kemudian mengawal widget yang kelihatan menggunakan crossFadeState.
Cuba AnimatedCrossFade
Ketik butang untuk bertukar antara dua widget teks yang berbeza. Perhatikan bagaimana satu widget menghilang secara beransur-ansur sementara satu lagi muncul, lalu menghasilkan peralihan yang kemas.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AnimatedCrossFade Demo',
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: const AnimatedCrossFadeScreen(),
);
}
}
class AnimatedCrossFadeScreen extends StatefulWidget {
const AnimatedCrossFadeScreen({super.key});
@override
State<AnimatedCrossFadeScreen> createState() => _AnimatedCrossFadeScreenState();
}
class _AnimatedCrossFadeScreenState extends State<AnimatedCrossFadeScreen> {
bool _showFirst = true;
void _toggleChild() {
setState(() {
_showFirst = !_showFirst;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('AnimatedCrossFade')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedCrossFade(
duration: const Duration(milliseconds: 700),
crossFadeState: _showFirst
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
firstChild: Container(
width: 200,
height: 100,
color: Colors.blueAccent,
alignment: Alignment.center,
child: const Text(
'First Widget',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
secondChild: Container(
width: 200,
height: 100,
color: Colors.deepOrange,
alignment: Alignment.center,
child: const Text(
'Second Widget',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
),
const SizedBox(height: 30),
ElevatedButton(
onPressed: _toggleChild,
child: const Text('Toggle Widget'),
),
],
),
),
);
}
}Memperhalus Animasi: Tempoh dan Lengkung
Dua sifat penting untuk semua animasi implisit ialah duration dan curve:
duration: Menentukan tempoh yang diperlukan untuk animasi selesai. GunakanDuration(milliseconds: ...)atauDuration(seconds: ...).curve: Mengawal kelajuan animasi sepanjang tempohnya.Curves.linearmempunyai kelajuan tetap,Curves.easeOutbermula pantas dan menjadi perlahan, manakalaCurves.bounceInmenambahkan kesan melantun.
Cuba pelbagai lengkung untuk mendapatkan rasa yang paling sesuai!
Semakan Animasi Implisit
Anda ingin mencipta butang yang, apabila diketuk, menyebabkan widget teks hilang secara lancar. Widget animasi implisit yang manakah paling sesuai untuk tugasan ini?
Ulang Kaji Animasi Implisit
Syabas! Anda telah mempelajari kehebatan Animasi Implisit dalam Flutter. Animasi ini membolehkan anda menambahkan peralihan yang lancar dan automatik hanya dengan mengubah sifat widget.
- Kita meneroka
AnimatedContaineruntuk menganimasikan saiz, warna dan bentuk. AnimatedOpacityuntuk memudarkan elemen masuk dan keluar.AnimatedCrossFadeuntuk bertukar antara dua widget dengan gabungan yang lancar.- Ingat untuk menetapkan
durationdan memilihcurveyang sesuai untuk animasi anda!
Seterusnya, kita akan mendalami Animasi Eksplisit untuk kawalan tersuai yang lebih kompleks.
Pelajari Dart dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 22
- Pelajaran
- 88
Soalan Lazim
Adakah pelajaran “Animasi Tersirat” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Animasi Tersirat”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Animasi Tersirat”?
Laksanakan animasi tersirat menggunakan widget seperti `AnimatedContainer` dan `AnimatedOpacity` untuk peralihan yang lancar dan automatik. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Animasi Tersirat” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?
Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- CustomPainter dan Canvas
- Animasi Tersirat
- Animasi Eksplisit dan Hero
- Animasi Berperingkat dan Berasaskan Fizik