Hero Animation: การเปลี่ยนองค์ประกอบร่วมใน Flutter คืออะไร

Hero Animation คืออะไร?

Hero Animation คือเทคนิคแอนิเมชั่น UI ที่องค์ประกอบร่วมเคลื่อนที่ไปยังหน้าจอปลายทางอย่างลื่นไหล โดยรักษาตัวตนไว้ ชื่อสะท้อนการเปรียบเทียบของ “ฮีโร่” — องค์ประกอบสำคัญที่ผ่านการเปลี่ยนองแบบมีบทเรียกระหว่างหน้าจอ ดึงดูดความสนใจของผู้ใช้ ต่างจากการเปลี่ยนองมาตรฐาน Hero Animation ไม่ทำลายการเชื่อมต่อทางสายตา ผู้ใช้จะเห็นวิถีต่อเนื่องขององค์ประกอบ ซึ่งช่วยให้เข้าใจลำดับชั้นการนำทางได้ดีขึ้น

แนวคิดของ Hero Animation ถูกกำหนดไว้ใน Material Design เป็นคำแนะนำสำหรับหน้าจอรายการ-รายละเอียด และการ์ด ขั้นตอนวิธีการแอนิเมชั่นประกอบด้วยสามขั้นตอน: บนหน้าจอต้นทาง องค์ประกอบจะอูกเน้นและเรียบเรียงในตำแหน่งเดิมสัมบูรณ์; ระหว่างการเปลี่ยนอง มันจะเปลี่ยนขนาด เคลื่อนที่ และเปลี่ยนรูปร่างตามตัวระบุปลายทาง; บนหน้าจอสุดท้าย องค์ประกอบจะถูกฝังไว้ในเลเอาร์ทใหม่ ตามข้อมูลจาก Material Design 3 การเปลี่ยนองฮีโร่ที่ใช้งานอย่างถูกต้องช่วยลดจำนวนการกดปุ่ม “กลับ” ผิดพลาดได้ 22%

Hero ใน Flutter: แท็กและ FlightShuttle

ใน Flutter การเปลี่ยนองฮีโร่ใช้งานผ่านวิเจ็ต Hero ซึ่งรับพารามิเตอร์ที่จำเป็น tag — ตัวระบุเฉพาะใจ Flutter จะค้นหาคู่ของวิเจ็ต Hero ที่มี tag เดียวกันบนเส้นทางต้นทางและปลายทางโดยอัตโนมัติ และเริ่มแอนิเมชั่น Hero ไม่ต้องการจัดการแอนิเมชั่นด้วยตนเอง — เฟรมเวิร์กเป็นผู้คำนวณวิถีและใช้การประมวลผ่านออบเจกต์ FlightShuttle ภายใน

FlightShuttle เป็น “กระสวยส่ง” ที่มองไม่เห็น ซึ่งในขณะที่เปลี่ยนอง จะสร้างสำเนาข้อนทับของวิเจ็ต Hero วางไว้ในระบบพิกัดสัมบูรณ์ และเปลี่ยนแปลง (scale, translate, rotate) จากตำแหน่งเริ่มต้นไปยังตำแหน่งสุดท้าย โค้งที่กำหนดเองสามารถส่งไปยัง FlightShuttle ผ่านคุณสมบัติ flightShuttleBuilder ซึ่งช่วยควบคุมวิถีการบิน: บินเป็นส่วนโค้ง กระเด้นขอบ หรือช้าลงก่อนถึงเป้าหมาย ใน Flutter 3.16+ Hero รองรับแอนิเมชั่นโดยรักษา clipRect และ borderRadius ให้ผลของการ์ดที่มีมุมกลมแปลงเป็นหน้าจอสี่เหลี่ยม

matchedGeometryEffect ใน SwiftUI

ใน SwiftUI สิ่งที่เทียบเท่ากับ Hero Animation คือตัวแก้ไข matchedGeometryEffect ที่เปิดตัวใน iOS 14 มันเชื่อมโยงสององค์ประกอผ่านตัวระบุ (id) และ namespace ต่างจาก Flutter ที่ Hero สกัดการเปลี่ยนองโดยอัตโนมัติ SwiftUI ต้องการประกาศ namespace อย่างชัดเจน และใช้ตัวแก้ไขกับทั้งสองส่วนของฉาก ไม่ว่าจะเป็นต้นทางหรือปลายทาง ภายในลำดับชั้นเดียวกันหรือผ่าน GeometryReader

แอนิเมชั่น matchedGeometryEffect รองรับการประมวลตำแหน่ง ขนาด การหมุน และรัศมีมุม สำหรับความลื่นไหล จะระบุ Animation ใน withAnimation SwiftUI ทำการแทรกค่ากลางระหว่างสถานะโดยอัตโนมัติตามโค้งเรียบระนุก easeInOut ใน iOS 17+ มีการรองรับ matchedTransitionSource สำหรับ TabView และ NavigationStack ซึ่งเป็นอนาล็อกของระบบของ Hero Animation ที่มีวิถีที่กำหนดไว้ล่วงหน้าสำหรับการเปลี่ยนองมาตรฐาน

Shared Element Transition ใน Android

ใน Android Hero Animation เรียกว่า Shared Element Transition และถูกนำไปใช้ผ่าน ActivityOptions.makeSceneTransitionAnimation หรือ FragmentTransaction.addSharedElement แต่ละองค์ประกอบร่วมจะถูกทำเครื่องหมายด้วยแอตทริบิวตร์ transitionName ใน XML หรือผ่านโค้ด และ Android จะจัดการแอนิเมชั่นระหว่างกิจกรรม ร่มจาก Android 5.0 (API 21) การเปลี่ยนองได้กลายเป็นส่วนหนึ่งของเฟรมเวิร์ก ก่อนหน้านั้นต้องเขียนแอนิเมชั่นแบบกำหนดเองโดยใช้ ValueAnimator

ใน Jetpack Compose Shared Element Transition ถูกนำไปใช้ผ่านตัวแก้ไข Modifier.sharedElement และ Modifier.sharedBounds ร่วมกับ AnimatedContent หรือ SharedTransitionLayout (ใช้งานได้ตั้งแต่ Compose BOM 2024.01) ต่างจากระบบ View Compose จะวาดรูปองค์ประกอบใหม่แบบขี้เกียจ ดังนั้นองค์ประกอบร่วมจึงถูกเก็บไว้ในหม่วนความจำใน CompositionLocal Compose รองรับการเปลี่ยนองจากรายการไปยังรายละเอียดโดยรักษา scrollOffset ซึ่งเป็นความสามารถสำคัญสำหรับการเปลี่ยนอง Hero ตามข้อมูล Google I/O 2024 Compose Shared Element Transition เร็วกว่ารุ่น View ถึง 15% เนื่องจากการจัดการ RenderNode โดยตรง

ตัวอย่างโค้ด

Flutter: Hero กับรูปภาพ

ตัวอย่างพื้นฐานของ Hero Animation ใน Flutter: ภาพย่อบนหน้าจอรายการและภาพเต็มจอบนหน้าจอรายละเอียด แท็ก image-hero เชื่อมโยงสองวิเจ็ต และ FlightShuttle จะเปลี่ยนองจากการ์ดไปสู่เต็มจอโดยอัตโนมัติ

import 'package:flutter/material.dart';

class ListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Hero(
            tag: 'image-hero',
            child: GestureDetector(
              onTap: () {
                Navigator.push(context,
                  MaterialPageRoute(
                    builder: (_) => DetailScreen(),
                  ),
                );
              },
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Image.network(
                  'https://picsum.photos/200',
                  width: 100, height: 100,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail')),
      body: Center(
        child: Hero(
          tag: 'image-hero',
          child: Image.network(
            'https://picsum.photos/800',
            width: 300, height: 400,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

ประเด็นสำคัญคือการใช้ แท็กเดียวกัน (image-hero) บนทั้งสองหน้าจอ Flutter จับคู่วิเจ็ต Hero โดยแท็กระหว่างการเปลี่ยนองเส้นทาง หากแท็กแตกต่างกัน แอนิเมชั่นจะไม่เริ่มขึ้น — องค์ประกอบจะปรากฏบนหน้าจอใหม่โดยไม่มีการเปลี่ยนอง สามารถใช้ชนิดข้อมูลใดๆ ก็ได้สำหรับแท็ก แต่สตริงเป็นตัวเลือกที่น่าเชื่อถือที่สุด

SwiftUI: matchedGeometryEffect ระหว่างหน้าจอ

ตัวอย่างของ Hero Animation ใน SwiftUI กับ NavigationStack ตัวแก้ไข matchedGeometryEffect เชื่อมโยงภาพในรายการและหน้าจอรายละเอียดผ่าน namespace และ withAnimation จะเริ่มการเปลี่ยนองที่ลื่นไหล

import SwiftUI

struct HeroExampleView: View {
    @Namespace private var heroNamespace
    @State private var isDetailShown = false

    var body: some View {
        VStack {
            if isDetailShown {
                DetailView(namespace: heroNamespace)
                    .transition(.identity)
            } else {
                ListView(namespace: heroNamespace)
                    .transition(.identity)
            }
        }
        .animation(Animation.easeInOut(duration: 0.4),
                   value: isDetailShown)
    }
}

struct ListView: View {
    let namespace: Namespace.ID

    var body: some View {
        Image("thumbnail")
            .resizable()
            .frame(width: 100, height: 100)
            .cornerRadius(12)
            .matchedGeometryEffect(id: "hero", in: namespace)
    }
}

struct DetailView: View {
    let namespace: Namespace.ID

    var body: some View {
        Image("thumbnail")
            .resizable()
            .frame(width: 300, height: 400)
            .cornerRadius(0)
            .matchedGeometryEffect(id: "hero", in: namespace)
    }
}

@Namespace สร้างชื่อวงสำหรับตัวระบุ matchedGeometryEffect องค์ประกอบทั้งสองใช้ id เดียวกัน (“hero”) และ namespace ที่ใช้ร่วมกัน เมื่อ isDetailShown เปลี่ยนแปลง SwiftUI จะเปลี่ยนแปลงขนาด ตำแหน่ง และรัศมีมุมระหว่างสองมุมมอง สร้างผลของฮีโร่ สำหรับ NavigationLink มาตรฐานกับ iOS 16+ ให้ใช้ navigationTransition(.hero)

Android: Shared Element Transition กับ Jetpack Compose

ตัวอย่างของ Shared Element Transition ใน Jetpack Compose กับ SharedTransitionLayout ตัวแก้ไข sharedElement จะเปลี่ยนององค์ประกอบร่วมระหว่างหน้าจอในระหว่างการนำทาง

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun HeroExample() {
    SharedTransitionLayout {
        var isDetail by remember { mutableStateOf(false) }

        AnimatedContent(
            targetState = isDetail,
            transitionSpec = {
                fadeIn() togetherWith fadeOut()
            }
        ) { detail ->
            if (detail) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .sharedElement(
                            state = rememberSharedContentState(key = "hero"),
                            animatedVisibilityScope = this
                        )
                ) {
                    AsyncImage(
                        model = "https://picsum.photos/800",
                        contentDescription = null,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            } else {
                Box(
                    modifier = Modifier
                        .size(100.dp)
                        .sharedElement(
                            state = rememberSharedContentState(key = "hero"),
                            animatedVisibilityScope = this
                        )
                ) {
                    AsyncImage(
                        model = "https://picsum.photos/200",
                        contentDescription = null,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            }
        }
    }
}

Compose SharedTransitionLayout (Compose BOM 2024.01+) ห่อหุ้มลำดับชั้น และตัวแก้ไข sharedElement ที่มีคีย์ “hero” เชื่อมโยงองค์ประกอบเริ่มต้นและตัวสุดท้าย AnimatedContent เปลี่ยนสถานะ และ Compose จะเปลี่ยนองขนาด ตำแหน่ง และรูปร่างของภาพโดยอัตโนมัติ ข้อดีสำคัญคือการรองรับแอนิเมชั่น bounds และ clipBounds ซึ่งให้ผลของการมุมกลมของการ์ดระหว่างการเปลี่ยนอง