---
# System prepended metadata

title: 2021-02-16 - How to implement animations?

---

# 2021-02-16 - How to implement animations?

We present our research from [here](https://github.com/hpi-swa-lab/BP2020RH1/wiki/animations). 

## General Idea
- Sequences hold one `PropertyAnimation` per animated property on a morph in the sequence.
- Sequences update each Animation with its current progress.
- `PropertyAnimations` hold 
    - a `target` (Morph) which they reference
    - a property that is animated
    - `keyframes` between which is interpolated, an ordered array of keyframe objects, each holding
        -  numbers (0 to 1 -- progress) and
        -  property value
        -  name (customer wants this)
        - per convention two keypairs following each other constitute an interval
    - (a curve, this is an anonymous function)
        - first step: assume linear curve everywhere
- For different kinds of properties (e.g. Color-based, number-based, text-based) PropertyAnimation can be subclassed

## `PropertyAnimation` external interface:
- `progress` (setter) will update the animation, may cause a rerender. This is triggered by the sequence
- `name` (get, set)



