面试题：Flutter基于Container构建高性能自定义动画组件

Question

利用Container构建一个自定义的动画组件，当用户点击该组件时，组件从初始的圆形逐渐变换为矩形，同时颜色从红色渐变到绿色，且动画过程流畅无卡顿。阐述实现该功能所涉及的关键技术点，如动画控制、状态管理等，并给出主要实现代码。

Answer 1

关键技术点

1. 动画控制：使用CSS的@keyframes规则来定义动画序列，通过animation属性应用动画。利用requestAnimationFrame来确保动画流畅执行，避免卡顿。
2. 状态管理：使用React的useState钩子（假设使用React框架）来管理组件的点击状态，从而触发动画。

主要实现代码（以React为例）

import React, { useState } from 'react';
import './styles.css';

const CustomAnimationComponent = () => {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    setIsClicked(!isClicked);
  };

  return (
    <div className={`animation-container ${isClicked ? 'clicked' : ''}`} onClick={handleClick}>
    </div>
  );
};

export default CustomAnimationComponent;

CSS代码（styles.css）

.animation-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  animation: none;
  transition: all 0.5s ease;
}

.clicked {
  border-radius: 0;
  background-color: green;
  width: 200px;
  height: 150px;
}

代码解释

1. JavaScript部分：
   • useState钩子初始化一个状态isClicked，用于记录组件是否被点击。
   • handleClick函数在点击时切换isClicked的状态。
   • 返回的div元素根据isClicked的状态添加不同的类名。
2. CSS部分：
   • .animation-container定义了组件的初始样式，圆形且红色背景。
   • .clicked类定义了点击后的样式，矩形且绿色背景，并通过transition属性实现平滑过渡。

若使用其他框架，如Vue，思路类似，但具体语法会有所不同。例如Vue的实现：

Vue实现代码（假设使用Vue 3 + Composition API）

<template>
  <div :class="['animation-container', isClicked ? 'clicked' : '']" @click="handleClick">
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isClicked = ref(false);

const handleClick = () => {
  isClicked.value =!isClicked.value;
};
</script>

<style scoped>
.animation-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  transition: all 0.5s ease;
}

.clicked {
  border-radius: 0;
  background-color: green;
  width: 200px;
  height: 150px;
}
</style>

在Vue中，使用ref来创建响应式状态isClicked，在模板中通过绑定类名和点击事件来实现同样的功能。