Framer Motion：改變顏色 animation 方向

Question

在 Framer Motion 中，我試圖讓兩個 colors 平滑地制作動畫。 colors 是紅色的 'hsl(0, 100, 50)' 和藍色的 'hsl(240, 100, 50)'。 不幸的是，animation 正在通過色輪，在橙色、黃色、綠色、青色等處進站。我如何讓它切換“方向”並從紅色平滑過渡，然后是紫色，然后是藍色？

Answer 1

盡管這出人意料地簡單，但最初做起來一點也不明顯。

這是錯誤的： animate={{ backgroundColor: ['hsl(0, 100, 50)', 'hsl(240, 100, 50)] }} ，

雖然這是正確的： animate={{ backgroundColor: ['hsl(0, 100, 50)', 'hsl(-120, 100, 50)] }} 。

（以防有人對這段代碼的去向感到困惑，“animate”是 motion.div 元素中的一個道具。有關更多示例，請查看文檔中的這些示例： https://www.framer.com/api /運動/示例/ ）