qiu'zhHA 效果图美化，如何使用GIF动图，并根据设备状态变.....

HacsXu

各位大佬好，小弟有一个问题自己搞不定了，求助各位大佬。
   代码各种抄，想创建一个徽章，根据空调的工作模式，设定不同的gif 动图，代码写好了但是不显示，只显示 文字“关闭，制热，制冷，等”如下图。求大佬解惑。

这是我写的代码，我也不知道用什么方式实现，求大佬解惑。

       service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.quan_ping
  - type: state-badge
    entity: climate.xiaomi_zwkt
    tap_action:
      action: more-info
    hold_action:
      action: toggle
    style:
      top: 19%
      left: 39%
      width: 7.5%
      padding: 12px
      transform: rotate(0deg)
    card_mod:
      style: |
        state-badge {
          background-image: var(--icon);
          background-size: contain;
          background-repeat: no-repeat;

          &[data-state="heat"] {
            --icon: url('/local/tubiao/空调热.gif');
          }
          &[data-state="cool"] {
            --icon: url(/local/tubiao/空调冷.gif);
         }
          &[data-state="auto"] {
            --icon: url(/local/tubiao/空调冷.gif);
         }
          &[data-state="dry"] {
            --icon: url(/local/tubiao/除湿.gif);
         }
          &[data-state="fan_only"] {
            --icon: url(/local/tubiao/空调无AC.gif);
          }
          &[data-state="off"] {
            --icon: url('/local/tubiao/空调关.png');
          }
        }

coolguy

照着网上教程改的，用gif可以实现动画效果

          - type: image
            entity: climate.1********0_climate
            tap_action:
              action: toggle
            style:
              top: 54.4%
              left: 79.5%
              width: 8%
              mix-blend-mode: lighten
            state_image:
              'off': /local/ui/ac_off1.png
              'on': /local/ui/ac_on.gif

复制代码

wzx123

- type: custom:button-card
    show_entity_picture: true
    entity: sensor.number_climates_on
    show_state: true
    name: 空调
    card_mod:
      style: |
        ha-card {
        margin: -2% 0px % 0px;
        }   
    tap_action:
      action: call-service
      service: input_boolean.toggle
      service_data:
        entity_id: input_boolean.guan_bi_suo_you_kong_diao
      animation_card: |
        [[[
          const animation_speed_ms = 900;
          const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
          this.shadowRoot.getElementById("card").style.animation = animation;
          window.setTimeout(() => {
            this.shadowRoot.getElementById("card").style.animation = "none";
          }, animation_speed_ms)
        ]]]
    extra_styles: |
      @keyframes card_bounce {
        0% {
          transform: scale(1);
        }
        15% {
          transform: scale(0.9);
        }
        25% {
          transform: scale(1);
        }
        30% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }
    entity_picture: |
      [[[ if (entity.state == 0) return '/local/house/空调无AC关.png';
          else return '/local/house/空调无AC.gif';
      ]]]
    styles:
      custom_fields:
        graph:
          - position: absolute
          - left: '-1px'
          - top: 70.5%
        unit:
          - position: absolute
          - left: 50%
          - top: 72%
      card:
        - border-radius: 15px
        - height: 115px
      entity_picture:
        - width: 55%

复制代码

让我瞅瞅怎么个事情

HacsXu

coolguy 发表于 2024-5-22 18:01
照着网上教程改的，用gif可以实现动画效果

感谢  做出来了

HacsXu

wzx123 发表于 2024-5-22 19:16
让我瞅瞅怎么个事情

感谢  感谢大佬