animation.yaml

substitutions: 
  friendly_name: JC3248W535 with AXS15231
  name: jc3248w535

esphome: 
  name: ${name}
  friendly_name: ${friendly_name]

esp32: 
  board: esp32-s3-devkitc-1
  framework: 
    type: esp-idf

external_components:
  - source: github://clydebarrow/esphome@lvgl-animations
    components: [ lvgl ]

logger: 

wifi: !include wifi.yaml

psram: 
  mode: octal
  speed: 80MHz

spi: 
  id: display_qspi
  type: quad
  clk_pin: 47
  data_pins: [21,48,40,39]

power_supply:
  id: backlight_id
  pin: 1
  enable_on_boot: true

i2c: 
  sda: 4
  scl: 8
  frequency: 400kHz

display: 
  - platform: mipi_spi
    id: jc_display
    model: jc3248w535
    rotation: 90

touchscreen:
  - platform: axs15231
    id: jc_touch
    display: jc_display
    update_interval: 30ms
    interrupt_pin: GPIO3
    transform:
      mirror_x: false
      mirror_y: true
      swap_xy: true

image:
 - file: four-leaf-clover-159210.svg
   id: sunny_png
   type: RGB565
   resize: 100x100
   transparency: alpha_channel

lvgl:
  bg_color: white
  animations:
  - id: logo
    duration: 5s
    timing:
      - type: gravity
        acceleration: 25.0
        
    widgets:
      - id: unit_id
        x:
          from: !lambda return random_uint32() % 400;
          to: !lambda return random_uint32() % 400;
        text_color:
          from: blue
          to: red
      - id: other_id
        y:
          from: 10
          to: 200
        x:
          from: 0
          to: 300
          
        text_color:
          from: green
          to: aqua
      - id: image_id
        transform_angle:
          from: 0
          to: 360

  widgets:
      - image:
          src: sunny_png
          align: center
          id: image_id
          transform_pivot_x: 50%
          transform_pivot_y: 50%
      - button:
          x: 20
          y: 20
          id: value_id
          on_click:
            - lvgl.animation.start: logo
          widgets:
          - label:
              text: Start animation
      - label:
          x: 20
          y: 100
          id: unit_id
          text_font: montserrat_20
          text: "A Label"
          pad_bottom: 2
      - label:
          x: 50
          y: 100
          id: other_id
          text_font: montserrat_20
          text: "Other Label"
          pad_bottom: 2

four-leaf-clover-159210.svg