Android Academy · บทเรียน

เหตุใดแอนิเมชันจึงสำคัญ

การเคลื่อนไหวที่ช่วยนำทางและสร้างความประทับใจให้ผู้ใช้

บทเรียน 1 จาก 413 ขั้นตอน

เหตุใดแอนิเมชันจึงสำคัญ เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

การเคลื่อนไหวที่มีจุดประสงค์

แอนิเมชันไม่ได้มีไว้เพียงเพื่อความสวยงาม ในแอป Android ที่ยอดเยี่ยม การเคลื่อนไหวจะ ชี้นำความสนใจ อธิบายสิ่งที่เปลี่ยนแปลง และทำให้ส่วนติดต่อผู้ใช้ตอบสนองได้ดีและดูมีชีวิตชีวา

ในหลักสูตรนี้ คุณจะเรียนรู้ API แอนิเมชันของ Jetpack Compose ตั้งแต่ตัวช่วย animate*AsState ที่เขียนได้ในบรรทัดเดียว ไปจนถึง AnimatedVisibility การเปลี่ยนผ่าน และสปริงที่อิงหลักฟิสิกส์

บทเรียนแรกนี้จะเน้นที่ เหตุผล และ ช่วงเวลาที่ควร ใช้แอนิเมชัน เพื่อให้การเคลื่อนไหวของคุณมีหน้าที่ที่ชัดเจนเสมอ

Compose ใช้แอนิเมชันแบบประกาศรายละเอียด

ใน Compose คุณไม่ต้องเริ่มและหยุดแอนิเมชันเองทีละเฟรม แต่จะอธิบาย ค่าเป้าหมาย จากนั้น Compose จะทำแอนิเมชันไปยังค่านั้นอย่างราบรื่นทุกครั้งที่ค่าดังกล่าวเปลี่ยนแปลง

ในที่นี้ สีของกล่องขับเคลื่อนด้วยสถานะบูลีนเพียงค่าเดียว เมื่อแตะ สถานะจะสลับและสีจะเปลี่ยนอย่างราบรื่นโดยอัตโนมัติ

@Composable
fun ColorBox() {
    var selected by remember { mutableStateOf(false) }
    val color by animateColorAsState(
        targetValue = if (selected) Color.Green else Color.Gray,
        label = "box-color"
    )
    Box(
        Modifier
            .size(120.dp)
            .background(color)
            .clickable { selected = !selected }
    )
}

การตอบสนองต่อการกระทำของผู้ใช้

หน้าที่สำคัญที่สุดอย่างหนึ่งของการเคลื่อนไหวคือ การให้ผลตอบรับ เมื่อผู้ใช้แตะปุ่มหรือสลับสวิตช์ แอนิเมชันเล็กน้อยจะยืนยันว่าแอปได้รับการกระทำนั้นแล้ว

การเปลี่ยนแปลงทันทีและกระตุกทำให้รู้สึกเหมือนแอปเสีย แต่การเปลี่ยนผ่านอย่างรวดเร็วในช่วง 150–300 มิลลิวินาทีจะให้ความรู้สึกประณีต ในที่นี้ ปุ่มจะย่อลงเล็กน้อยขณะถูกกด

@Composable
fun PressableButton(onClick: () -> Unit) {
    var pressed by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        targetValue = if (pressed) 0.92f else 1f,
        label = "press-scale"
    )
    Button(
        onClick = onClick,
        modifier = Modifier.graphicsLayer {
            scaleX = scale; scaleY = scale
        }
    ) { Text("Tap me") }
}

การอธิบายการเปลี่ยนแปลงของสถานะ

เมื่อส่วนติดต่อผู้ใช้เปลี่ยนแปลง แอนิเมชันจะช่วยให้ผู้ใช้เข้าใจว่า เพิ่งเกิดอะไรขึ้น รายการที่ค่อย ๆ ปรากฏและเลื่อนเข้ามาจะสื่อว่าเป็น "รายการใหม่" ส่วนรายการที่ค่อย ๆ จางหายจะสื่อว่า "ถูกนำออกแล้ว"

หากไม่มีการเคลื่อนไหว เนื้อหาอาจปรากฏหรือหายไปอย่างฉับพลัน ทำให้ผู้ใช้สับสนว่าสิ่งนั้นปรากฏ หายไป หรือย้ายตำแหน่ง

@Composable
fun Banner(visible: Boolean) {
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn() + slideInVertically(),
        exit = fadeOut() + slideOutVertically()
    ) {
        Text("Saved successfully!")
    }
}

ความต่อเนื่องและการรับรู้ตำแหน่ง

การเคลื่อนไหวช่วยรักษา ความต่อเนื่อง เมื่อการ์ดขยายหรือองค์ประกอบย้ายไปยังตำแหน่งใหม่ การทำแอนิเมชันให้กับการเปลี่ยนแปลงจะช่วยให้ผู้ใช้รับรู้ตำแหน่งในพื้นที่ได้ต่อเนื่อง

Compose สามารถทำแอนิเมชันให้การเปลี่ยนแปลงเค้าโครงโดยอัตโนมัติด้วย Modifier.animateContentSize() ทำให้กล่องขยายหรือหดตัวอย่างราบรื่นเมื่อเนื้อหาเปลี่ยนแปลง

@Composable
fun ExpandableCard(expanded: Boolean) {
    Column(
        Modifier
            .fillMaxWidth()
            .animateContentSize()
            .padding(16.dp)
    ) {
        Text("Title", style = MaterialTheme.typography.titleMedium)
        if (expanded) {
            Text("Here is the longer body that appears when expanded.")
        }
    }
}

ระยะเวลาและจังหวะมีความสำคัญ

แอนิเมชันที่ดีต้อง รวดเร็ว การเปลี่ยนผ่านส่วนใหญ่ของส่วนติดต่อผู้ใช้ควรใช้เวลาประมาณ 150–400 มิลลิวินาที หากช้าเกินไป แอปจะดูอืดอาด หากเร็วเกินไป การเคลื่อนไหวจะมองไม่เห็น

Compose ให้คุณปรับระยะเวลาและจังหวะด้วย tween และเส้นโค้ง easing Easing ทำให้การเคลื่อนไหวดูเป็นธรรมชาติด้วยการเร่งและชะลอความเร็ว

val offset by animateDpAsState(
    targetValue = if (open) 0.dp else 200.dp,
    animationSpec = tween(
        durationMillis = 300,
        easing = FastOutSlowInEasing
    ),
    label = "panel-offset"
)

อย่าใช้มากเกินไป

แอนิเมชันมีพลังมาก จึงใช้มากเกินไปได้ง่าย การเคลื่อนไหวที่มากเกินไปทำให้ เสียสมาธิ ทำให้ผู้ใช้ทำงานช้าลง และอาจทำให้รู้สึกไม่สบายได้

หลักทั่วไป:

ใช้แอนิเมชันเพื่อสื่อสาร ไม่ใช่เพื่อตกแต่ง
ทำให้การเปลี่ยนผ่านสั้นและไม่หวือหวา
หลีกเลี่ยงการทำแอนิเมชันให้ทุกอย่างบนหน้าจอพร้อมกัน
อย่าขัดขวางการกระทำของผู้ใช้ระหว่างแอนิเมชัน

คำนึงถึงการเข้าถึง

ผู้ใช้บางรายเปิดใช้ ลบแอนิเมชัน ในการตั้งค่าระบบเนื่องจากไวต่อการเคลื่อนไหว แอปที่ใส่ใจผู้ใช้ควรเคารพการตั้งค่านี้

คุณสามารถอ่านได้ว่าแอนิเมชันถูกปรับขนาดเป็นศูนย์หรือไม่ แล้วลดหรือปิดการเคลื่อนไหวที่ไม่จำเป็นตามนั้น

@Composable
fun rememberReduceMotion(): Boolean {
    val context = LocalContext.current
    val scale = Settings.Global.getFloat(
        context.contentResolver,
        Settings.Global.ANIMATOR_DURATION_SCALE,
        1f
    )
    return scale == 0f
}

ชุดเครื่องมือแอนิเมชันของ Compose

Compose มีชุด API สำหรับแอนิเมชันที่แบ่งเป็นหลายระดับ คุณจะได้พบกับ API เหล่านี้ตลอดบทเรียน:

animate*AsState - ทำแอนิเมชันให้ค่าหนึ่งค่า เช่น สี ขนาด หรือจำนวนทศนิยม
AnimatedVisibility - ทำแอนิเมชันตอนที่องค์ประกอบปรากฏและหายไป
updateTransition - ประสานค่าหลายค่าให้เปลี่ยนไปพร้อมกัน
AnimatedContent - ค่อย ๆ เปลี่ยนเนื้อหาหนึ่งเป็นอีกเนื้อหาหนึ่ง
Animatable และ spring - ควบคุมในระดับล่างโดยอิงหลักฟิสิกส์

เริ่มจาก API ระดับสูงก่อน และลงไปใช้ระดับที่ต่ำลงเมื่อจำเป็นต้องควบคุมมากขึ้นเท่านั้น

แอนิเมชันติดตามสถานะ

แนวคิดสำคัญที่ช่วยให้เข้าใจทุกอย่างคือ ใน Compose แอนิเมชันจะติดตามสถานะ เมื่อคุณเปลี่ยนค่า API แอนิเมชันจะค่อย ๆ เปลี่ยนส่วนติดต่อผู้ใช้ไปยังค่าใหม่อย่างราบรื่นในทุกเฟรม

ดังนั้น โดยปกติคุณแทบไม่ต้องเขียนลำดับเวลา เพียงประกาศว่า "คุณสมบัตินี้ควรมีค่าเท่ากับ X" แล้ว Compose จะจัดการเฟรมระหว่างกลางให้เอง

@Composable
fun FadingText(highlighted: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (highlighted) 1f else 0.4f,
        label = "text-alpha"
    )
    Text(
        "Status",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

อุ่นเครื่องด้วย Kotlin ล้วนแบบสั้น ๆ

แอนิเมชันจะคำนวณค่าระหว่างค่าต่าง ๆ ที่แกนหลักก็คือคณิตศาสตร์ง่าย ๆ: เศษส่วน t ตั้งแต่ 0 ถึง 1 จะผสมค่าจุดเริ่มต้นกับค่าจุดสิ้นสุด แนวคิดนี้เรียกว่า การประมาณค่าเชิงเส้น หรือ lerp และเป็นพื้นฐานของแอนิเมชันทุกแบบที่คุณจะเขียน

ตัวอย่างโค้ด Kotlin ล้วนขนาดเล็กนี้แสดงแนวคิดที่ Compose นำไปใช้หลายครั้งต่อวินาที

fun lerp(start: Float, end: Float, t: Float): Float =
    start + (end - start) * t

fun main() {
    for (i in 0..4) {
        val t = i / 4f
        println("t=$t -> ${lerp(0f, 100f, t)}")
    }
}

ตรวจสอบความเข้าใจ

แนวคิดหลักของแอนิเมชันใน Jetpack Compose คืออะไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: การเคลื่อนไหวที่มีความหมาย

ตอนนี้คุณทราบแล้วว่าแอนิเมชันมีความสำคัญ อย่างไร และเข้าใจแนวคิดเบื้องหลังแล้ว:

การเคลื่อนไหวให้ผลตอบกลับ อธิบายการเปลี่ยนแปลง และรักษาความต่อเนื่อง
แอนิเมชันของ Compose เป็นแบบ ประกาศเจตนา และติดตามสถานะ
กำหนดการเปลี่ยนแปลงให้สั้น (ประมาณ 150-400 มิลลิวินาที) และมีจุดประสงค์ อย่าใช้มากเกินไป
คำนึงถึงผู้ใช้ที่ลดการเคลื่อนไหวไว้เพื่อการเข้าถึง
เริ่มจาก API ระดับสูงก่อน: animate*AsState, AnimatedVisibility, การเปลี่ยนสถานะ และสปริง

ถัดไป: ทำแอนิเมชันให้ค่าหนึ่งค่าด้วยตระกูล animate*AsState

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 36
บทเรียน: 152

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “เหตุใดแอนิเมชันจึงสำคัญ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เหตุใดแอนิเมชันจึงสำคัญ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เหตุใดแอนิเมชันจึงสำคัญ”

การเคลื่อนไหวที่ช่วยนำทางและสร้างความประทับใจให้ผู้ใช้ คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “เหตุใดแอนิเมชันจึงสำคัญ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม

ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Android Academy