1 /* 2 * Copyright (c) 2020-2021 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16 /** 17 * @addtogroup UI_Animator 18 * @{ 19 * 20 * @brief Defines UI animation effects and provides matched curves. 21 * 22 * @since 1.0 23 * @version 1.0 24 */ 25 26 /** 27 * @file easing_equation.h 28 * 29 * @brief Defines the attributes and functions of the animation easing module. 30 * 31 * @since 1.0 32 * @version 1.0 33 */ 34 35 #ifndef GRAPHIC_LITE_EASING_EQUATION_H 36 #define GRAPHIC_LITE_EASING_EQUATION_H 37 38 #include "gfx_utils/heap_base.h" 39 #include <cstdint> 40 41 namespace OHOS { 42 /** 43 * @brief Calculates the value for the current time of an animation. 44 * 45 * @param startPos Indicates the start value of this animation. 46 * @param endPos Indicates the end value of this animation. 47 * @param curTime Indicates the current time of this animation. 48 * @param durationTime Indicates the total duration of this animation. 49 * 50 * @brief Returns the value for the current time. 51 */ 52 typedef int16_t (*EasingFunc)(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 53 54 /** 55 * @brief Defines functions for specifying the velocity of an animation. 56 * 57 * @since 1.0 58 * @version 1.0 59 */ 60 class EasingEquation : public HeapBase { 61 public: 62 /** 63 * @brief Sets the parameter <b>s</b> in the equation <b>(s+1)*t^3 - s*t^2</b> for a back easing. 64 * 65 * A larger <b>s</b> indicates a larger degree of overshoot. The default value is 1.7. You are advised to set 66 * this parameter to a value ranging from 1 to 4. The setting takes effect for all the back-ease animations. 67 * 68 * @param overshoot Indicates the overshoot <b>s</b> in the equation to set. 69 * @see BackEaseIn | BackEaseOut | BackEaseInOut 70 * @since 1.0 71 * @version 1.0 72 */ 73 static void SetBackOvershoot(double overshoot); 74 75 /** 76 * @brief Eases in with an overshoot. 77 * 78 * <b>(s+1)*t^3 - s*t^2</b> is the equation for a back easing. 79 * The animation moves back slightly at the beginning and then accelerates towards the end. 80 * 81 * @param startPos Indicates the start value of this animation. 82 * @param endPos Indicates the end value of this animation. 83 * @param curTime Indicates the current time of this animation. 84 * @param durationTime Indicates the total duration of this animation. 85 * 86 * @return Returns the value for the current time. 87 * @see SetBackOvershoot | BackEaseOut | BackEaseInOut 88 * @since 1.0 89 * @version 1.0 90 */ 91 static int16_t BackEaseIn(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 92 93 /** 94 * @brief Eases out with an overshoot. 95 * 96 * <b>(s+1)*t^3 - s*t^2</b> is the equation for a back easing. 97 * The animation moves towards the end, slightly exceeds it and finally comes back. 98 * 99 * @param startPos Indicates the start value of this animation. 100 * @param endPos Indicates the end value of this animation. 101 * @param curTime Indicates the current time of this animation. 102 * @param durationTime Indicates the total duration of this animation. 103 * 104 * @return Returns the value for the current time. 105 * @see SetBackOvershoot | BackEaseIn | BackEaseInOut 106 * @since 1.0 107 * @version 1.0 108 */ 109 static int16_t BackEaseOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 110 111 /** 112 * @brief Eases in and then out with an overshoot. 113 * 114 * <b>(s+1)*t^3 - s*t^2</b> is the equation for a back easing. The animation slightly moves back at the beginning, 115 * goes towards the end, slightly exceeds it and finally comes back. 116 * 117 * @param startPos Indicates the start value of this animation. 118 * @param endPos Indicates the end value of this animation. 119 * @param curTime Indicates the current time of this animation. 120 * @param durationTime Indicates the total duration of this animation. 121 * 122 * @return Returns the value for the current time. 123 * @see SetBackOvershoot | BackEaseIn | BackEaseOut 124 * @since 1.0 125 * @version 1.0 126 */ 127 static int16_t BackEaseInOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 128 129 /** 130 * @brief Eases in shaping like a circular curve. 131 * 132 * <b>sqrt(1-t^2)</b> is the equation for a circular easing. The animation starts slowly from zero velocity and 133 * accelerates fast towards the end. The acceleration change is similar to a circular curve. 134 * 135 * @param startPos Indicates the start value of this animation. 136 * @param endPos Indicates the end value of this animation. 137 * @param curTime Indicates the current time of this animation. 138 * @param durationTime Indicates the total duration of this animation. 139 * 140 * @return Returns the value for the current time. 141 * @see CircEaseOut | CircEaseInOut 142 * @since 1.0 143 * @version 1.0 144 */ 145 static int16_t CircEaseIn(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 146 147 /** 148 * @brief Eases out shaping like a circular curve. 149 * 150 * <b>sqrt(1-t^2)</b> is the equation for a circular easing. The animation starts fast and decelerates slowly 151 * towards the end. The acceleration change is similar to a circular curve. 152 * 153 * @param startPos Indicates the start value of this animation. 154 * @param endPos Indicates the end value of this animation. 155 * @param curTime Indicates the current time of this animation. 156 * @param durationTime Indicates the total duration of this animation. 157 * 158 * @return Returns the value for the current time. 159 * @see CircEaseIn | CircEaseInOut 160 * @since 1.0 161 * @version 1.0 162 */ 163 static int16_t CircEaseOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 164 165 /** 166 * @brief Eases in and then out shaping like a circular curve. 167 * 168 * <b>sqrt(1-t^2)</b> is the equation for a circular easing. The animation accelerates slowly until halfway and 169 * decreases slowly towards the end. The acceleration change is similar to a circular curve. 170 * 171 * @param startPos Indicates the start value of this animation. 172 * @param endPos Indicates the end value of this animation. 173 * @param curTime Indicates the current time of this animation. 174 * @param durationTime Indicates the total duration of this animation. 175 * 176 * @return Returns the value for the current time. 177 * @see CircEaseIn | CircEaseOut 178 * @since 1.0 179 * @version 1.0 180 */ 181 static int16_t CircEaseInOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 182 183 /** 184 * @brief Eases in shaping like a cubic curve. 185 * 186 * <b>t^3</b> is the equation for a cubic easing. The animation starts slowly from zero velocity and accelerates 187 * fast towards the end. The acceleration change is similar to a cubic curve. 188 * 189 * @param startPos Indicates the start value of this animation. 190 * @param endPos Indicates the end value of this animation. 191 * @param curTime Indicates the current time of this animation. 192 * @param durationTime Indicates the total duration of this animation. 193 * 194 * @return Returns the value for the current time. 195 * @see CubicEaseOut | CubicEaseInOut 196 * @since 1.0 197 * @version 1.0 198 */ 199 static int16_t CubicEaseIn(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 200 201 /** 202 * @brief Eases out shaping like a cubic curve. 203 * 204 * <b>t^3</b> is the equation for a cubic easing. The animation starts fast and decelerates slowly 205 * towards the end. The acceleration change is similar to a cubic curve. 206 * 207 * @param startPos Indicates the start value of this animation. 208 * @param endPos Indicates the end value of this animation. 209 * @param curTime Indicates the current time of this animation. 210 * @param durationTime Indicates the total duration of this animation. 211 * 212 * @return Returns the value for the current time. 213 * @see CubicEaseIn | CubicEaseInOut 214 * @since 1.0 215 * @version 1.0 216 */ 217 static int16_t CubicEaseOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 218 219 /** 220 * @brief Eases in and then out shaping like a cubic curve. 221 * 222 * <b>t^3</b> is the equation for a cubic easing. The animation accelerates slowly until halfway 223 * and decelerates slowly towards the end. The acceleration change is similar to a cubic curve. 224 * 225 * @param startPos Indicates the start value of this animation. 226 * @param endPos Indicates the end value of this animation. 227 * @param curTime Indicates the current time of this animation. 228 * @param durationTime Indicates the total duration of this animation. 229 * 230 * @return Returns the value for the current time. 231 * @see CubicEaseIn | CubicEaseOut 232 * @since 1.0 233 * @version 1.0 234 */ 235 static int16_t CubicEaseInOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 236 237 /** 238 * @brief Displays no linear easing effects. 239 * 240 * <b>t</b> is the equation for a linear easing. The animation progresses at a constant velocity towards the end. 241 * 242 * @param startPos Indicates the start value of this animation. 243 * @param endPos Indicates the end value of this animation. 244 * @param curTime Indicates the current time of this animation. 245 * @param durationTime Indicates the total duration of this animation. 246 * 247 * @return Returns the value for the current time. 248 * @see LinearEaseIn | LinearEaseOut | LinearEaseInOut 249 * @since 1.0 250 * @version 1.0 251 */ 252 static int16_t LinearEaseNone(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 253 254 /** 255 * @brief Eases in shaping like a quadratic curve. 256 * 257 * <b>t^2</b> is the equation for a quadratic easing. The animation starts slowly from zero velocity and 258 * accelerates fast towards the end. The acceleration change is similar to a quadratic curve. 259 * 260 * @param startPos Indicates the start value of this animation. 261 * @param endPos Indicates the end value of this animation. 262 * @param curTime Indicates the current time of this animation. 263 * @param durationTime Indicates the total duration of this animation. 264 * 265 * @return Returns the value for the current time. 266 * @see QuadEaseOut | QuadEaseInOut 267 * @since 1.0 268 * @version 1.0 269 */ 270 static int16_t QuadEaseIn(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 271 272 /** 273 * @brief Eases out shaping like a quadratic curve. 274 * 275 * <b>t^2</b> is the equation for a quadratic easing. The animation starts fast and decelerates slowly 276 * towards the end. The acceleration change is similar to a quadratic curve. 277 * 278 * @param startPos Indicates the start value of this animation. 279 * @param endPos Indicates the end value of this animation. 280 * @param curTime Indicates the current time of this animation. 281 * @param durationTime Indicates the total duration of this animation. 282 * 283 * @return Returns the value for the current time. 284 * @see QuadEaseIn | QuadEaseInOut 285 * @since 1.0 286 * @version 1.0 287 */ 288 static int16_t QuadEaseOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 289 290 /** 291 * @brief Eases in and then out shaping like a quadratic curve. 292 * 293 * <b>t^2</b> is the equation for a quadratic easing. The animation accelerates slowly until halfway 294 * and decelerates slowly towards the end. The acceleration change is similar to a quadratic curve. 295 * 296 * @param startPos Indicates the start value of this animation. 297 * @param endPos Indicates the end value of this animation. 298 * @param curTime Indicates the current time of this animation. 299 * @param durationTime Indicates the total duration of this animation. 300 * 301 * @return Returns the value for the current time. 302 * @see QuadEaseIn | QuadEaseOut 303 * @since 1.0 304 * @version 1.0 305 */ 306 static int16_t QuadEaseInOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 307 308 /** 309 * @brief Eases in shaping like a quintic curve. 310 * 311 * <b>t^5</b> is the equation for a quintic easing. The animation starts slowly from zero velocity and 312 * accelerates fast towards the end. The acceleration change is similar to a quintic curve. 313 * 314 * @param startPos Indicates the start value of this animation. 315 * @param endPos Indicates the end value of this animation. 316 * @param curTime Indicates the current time of this animation. 317 * @param durationTime Indicates the total duration of this animation. 318 * 319 * @return Returns the value for the current time. 320 * @see QuintEaseOut | QuintEaseInOut 321 * @since 1.0 322 * @version 1.0 323 */ 324 static int16_t QuintEaseIn(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 325 326 /** 327 * @brief Eases out shaping like a quintic curve. 328 * 329 * <b>t^5</b> is the equation for a quintic easing. The animation starts fast and decelerates slowly 330 * towards the end. The acceleration change is similar to a quintic curve. 331 * 332 * @param startPos Indicates the start value of this animation. 333 * @param endPos Indicates the end value of this animation. 334 * @param curTime Indicates the current time of this animation. 335 * @param durationTime Indicates the total duration of this animation. 336 * 337 * @return Returns the value for the current time. 338 * @see QuintEaseIn | QuintEaseInOut 339 * @since 1.0 340 * @version 1.0 341 */ 342 static int16_t QuintEaseOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 343 344 /** 345 * @brief Eases in and then out shaping like a quintic curve. 346 * 347 * <b>t^5</b> is the equation for a quintic easing. The animation accelerates slowly until halfway and 348 * decelerates slowly towards the end. The acceleration change is similar to a quintic curve. 349 * 350 * @param startPos Indicates the start value of this animation. 351 * @param endPos Indicates the end value of this animation. 352 * @param curTime Indicates the current time of this animation. 353 * @param durationTime Indicates the total duration of this animation. 354 * 355 * @return Returns the value for the current time. 356 * @see QuintEaseIn | QuintEaseOut 357 * @since 1.0 358 * @version 1.0 359 */ 360 static int16_t QuintEaseInOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 361 362 /** 363 * @brief Eases in shaping like a sinusoidal curve. 364 * 365 * <b>sin(t)</b> is the equation for a sinusoidal easing. The animation starts slowly from zero velocity 366 * and accelerates fast towards the end. The acceleration change is similar to a sinusoidal curve. 367 * 368 * @param startPos Indicates the start value of this animation. 369 * @param endPos Indicates the end value of this animation. 370 * @param curTime Indicates the current time of this animation. 371 * @param durationTime Indicates the total duration of this animation. 372 * 373 * @return Returns the value for the current time. 374 * @see SineEaseOut | SineEaseInOut 375 * @since 1.0 376 * @version 1.0 377 */ 378 static int16_t SineEaseIn(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 379 380 /** 381 * @brief Eases out shaping like a sinusoidal curve. 382 * 383 * <b>sin(t)</b> is the equation for a sinusoidal easing. The animation starts fast and decelerates 384 * slowly towards the end. The acceleration change is similar to a sinusoidal curve. 385 * 386 * @param startPos Indicates the start value of this animation. 387 * @param endPos Indicates the end value of this animation. 388 * @param curTime Indicates the current time of this animation. 389 * @param durationTime Indicates the total duration of this animation. 390 * 391 * @return Returns the value for the current time. 392 * @see SineEaseIn | SineEaseInOut 393 * @since 1.0 394 * @version 1.0 395 */ 396 static int16_t SineEaseOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 397 398 /** 399 * @brief Eases in and then out shaping like a sinusoidal curve. 400 * 401 * <b>sin(t)</b> is the equation for a sinusoidal easing. The animation accelerates slowly until 402 * halfway and decelerates slowly towards the end. The acceleration change is similar to a sinusoidal curve. 403 * 404 * @param startPos Indicates the start value of this animation. 405 * @param endPos Indicates the end value of this animation. 406 * @param curTime Indicates the current time of this animation. 407 * @param durationTime Indicates the total duration of this animation. 408 * 409 * @return Returns the value for the current time. 410 * @see SineEaseIn | SineEaseOut 411 * @since 1.0 412 * @version 1.0 413 */ 414 static int16_t SineEaseInOut(int16_t startPos, int16_t endPos, uint16_t curTime, uint16_t durationTime); 415 416 private: 417 static constexpr uint16_t INTERPOLATION_RANGE = 1024; 418 static constexpr uint16_t INTERPOLATION_RANGE_OFFSET = 10; 419 static constexpr uint32_t INTERPOLATION_RANGE_SQUARE = 1048576; 420 static constexpr double OVERSHOOT_MAX = 4; 421 static constexpr double OVERSHOOT_MIN = 1; 422 static double overshoot_; 423 }; 424 } // namespace OHOS 425 #endif 426