Animations

AnimatedContainer

A container that gradually changes its values over a period of time.

AnimatedContainer

Tap me!

AnimatedOpacity

Fade

Tap to fade

<template>
  <Column :mainAxisAlignment="'center'" :crossAxisAlignment="'center'">
    <SizedBox :height="20" />
    <Text :style="TextStyle({ fontSize: 18, fontWeight: 'bold' })">AnimatedContainer</Text>
    <SizedBox :height="20" />

    <GestureDetector @tap="toggleContainer">
      <AnimatedContainer
        :width="selected ? 200 : 100"
        :height="selected ? 100 : 200"
        :alignment="selected ? 'center' : 'topCenter'"
        :duration="1000"
        curve="ease-in-out"
        :decoration="
          BoxDecoration({
            borderRadius: BorderRadius.all(selected ? 20 : 0),
            color: selected ? 'red' : 'blue',
            boxShadow: selected
              ? BoxShadow({
                  color: 'rgba(0,0,0,0.5)',
                  blurRadius: 10,
                  spreadRadius: 2,
                  offset: { x: 0, y: 4 },
                })
              : undefined,
          })
        "
      >
        <Text :style="TextStyle({ color: 'white' })">Tap me!</Text>
      </AnimatedContainer>
    </GestureDetector>

    <SizedBox :height="40" />
    <div style="height: 1px; width: 100%; background: #eee" />
    <SizedBox :height="40" />

    <Text :style="TextStyle({ fontSize: 18, fontWeight: 'bold' })">AnimatedOpacity</Text>
    <SizedBox :height="20" />

    <Column>
      <AnimatedOpacity :opacity="opacityLevel" :duration="500">
        <Container :width="100" :height="100" color="green" alignment="center">
          <Text :style="TextStyle({ color: 'white' })">Fade</Text>
        </Container>
      </AnimatedOpacity>
      <SizedBox :height="20" />
      <GestureDetector @tap="toggleOpacity">
        <Container
          :padding="EdgeInsets.all(10)"
          :decoration="BoxDecoration({ borderRadius: BorderRadius.all(4), color: '#EEE' })"
        >
          <Text>Tap to fade</Text>
        </Container>
      </GestureDetector>
    </Column>
  </Column>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  AnimatedContainer,
  AnimatedOpacity,
  Column,
  Text,
  SizedBox,
  GestureDetector,
  Container,
  BoxDecoration,
  BorderRadius,
  BoxShadow,
  TextStyle,
  EdgeInsets,
} from "fluekit";

const selected = ref(false);
const toggleContainer = () => {
  selected.value = !selected.value;
};

const opacityLevel = ref(1.0);
const toggleOpacity = () => {
  console.log(opacityLevel.value);

  opacityLevel.value = opacityLevel.value === 1.0 ? 0.0 : 1.0;
};
</script>

AnimatedOpacity

Animated version of Opacity which automatically transitions the child's opacity over a given duration.

Fade

Toggle Opacity

<template>
  <div class="demo-box">
    <Column :gap="20" alignment="center">
      <AnimatedOpacity :opacity="opacity" :duration="500">
        <Container :width="100" :height="100" color="blue" alignment="center">
          <Text data="Fade" :style="TextStyle({ color: 'white' })" />
        </Container>
      </AnimatedOpacity>

      <GestureDetector @tap="toggleOpacity">
        <Container
          color="#eee"
          :padding="EdgeInsets.all(10)"
          :border="Border.all({ width: 1, color: '#ccc' })"
          :borderRadius="4"
        >
          <Text data="Toggle Opacity" />
        </Container>
      </GestureDetector>
    </Column>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  AnimatedOpacity,
  Container,
  Column,
  Text,
  GestureDetector,
  TextStyle,
  EdgeInsets,
  Border,
} from "fluekit";

const opacity = ref(1);

const toggleOpacity = () => {
  opacity.value = opacity.value === 1 ? 0.2 : 1;
};
</script>

API

AnimatedContainer

Props

Name	Type	Default	Description
width	number | string	-	The width of the container.
height	number | string	-	The height of the container.
padding	EdgeInsets	-	The padding of the container.
margin	EdgeInsets	-	The margin of the container.
decoration	BoxDecoration	-	The decoration to paint behind the child.
foregroundDecoration	BoxDecoration	-	The decoration to paint in front of the child.
color	string	-	The color to paint behind the child.
alignment	Alignment	-	The alignment of the child within the container.
clipBehavior	'none' | 'hardEdge' | 'antiAlias'	'none'	The content will be clipped (or not) according to this option.
transform	string	-	The transformation matrix to apply to the container.
transformAlignment	Alignment	-	The alignment of the origin of the coordinate system in which the transform takes place.
constraints	BoxConstraints	-	Additional constraints to apply to the child.
duration	number	300	The duration over which to animate the parameters.
curve	string	'linear'	The curve to apply when animating the parameters.

Slots

Name	Description
default	The child contained by the container.

AnimatedOpacity

Props

Name	Type	Default	Description
opacity	number	-	The fraction to scale the child's alpha value.
duration	number	300	The duration over which to animate the opacity.
curve	string	'linear'	The curve to apply when animating the opacity.

Slots

Name	Description
default	The widget below this widget in the tree.