Share via


Setting the Weight on Interpolations

The Weight attribute (for EaseIn, EaseOut, Exp, Log, and SCurve types) controls the blending between your specified interpolation type and a Linear interpolation. Weight is specified as a percentage, where 1 indicates 100%. A value of 1 has no effect on the interpolation. A weight of 0 produces the same effect as if you were using a Linear interpolation (0% of the interpolation type). Values greater than 1 create a more extreme curve of your specified interpolation type. 

The following example shows how the Weight attribute affects an animation that transitions between position keyframes using an Exp interpolation.

<Mcml xmlns="https://schemas.microsoft.com/2008/mcml">

  <UI Name="InterpolationWeight">

    <Content>
      <Panel>
        
        <Layout >
          <FlowLayout Orientation="Horizontal" Spacing="0,50" ItemAlignment="Center" />
        </Layout>
        
        <Children>

          <Panel>
            
            <Layout >
              <FlowLayout Orientation="Vertical" Spacing="50,0" ItemAlignment="Center" />
            </Layout>

            <Children>
              <Text Color="Red" Content="Linear" />
              <Text Color="Red" Content="Exp, weight 0.2" />
              <Text Color="Red" Content="Exp, weight 1 (default)" />
              <Text Color="Red" Content="Exp, weight 2" />
              <Text Color="Red" Content="Exp, weight 4" />
            </Children>

          </Panel>

          <Panel>

            <Layout >
              <FlowLayout Orientation="Vertical" Spacing="0,50" ItemAlignment="Center" />
            </Layout>

            <Children>

              <!-- Display the same animation with different values for weight. -->
              <Graphic Name="AnimStar0" Content="file://GreenStar.PNG">
                <Animations>
                  <Animation Loop="-1">
                    <Keyframes>
                      <PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Linear" />
                      <PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Linear" />
                      <PositionKeyframe Time="4.0" Value="-275,0,0" />
                    </Keyframes>
                  </Animation>
                </Animations>
              </Graphic>
              
              <Graphic Name="AnimStar1" Content="file://GreenStar.PNG">
                <Animations>
                  <Animation Loop="-1">
                    <Keyframes>
                      <PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Exp,.2" />
                      <PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Exp,.2" />
                      <PositionKeyframe Time="4.0" Value="-275,0,0" />
                    </Keyframes>
                  </Animation>
                </Animations>
              </Graphic>

              <Graphic Name="AnimStar2" Content="file://GreenStar.PNG">
                <Animations>
                  <Animation Loop="-1">
                    <Keyframes>
                      <!-- If weight is not specified, the default value is 1. -->
                      <PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Exp" />
                      <PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Exp" />
                      <PositionKeyframe Time="4.0" Value="-275,0,0" />
                    </Keyframes>
                  </Animation>
                </Animations>
              </Graphic>

              <Graphic Name="AnimStar3" Content="file://GreenStar.PNG">
                <Animations>
                  <Animation Loop="-1">
                    <Keyframes>
                      <PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Exp,2.0" />
                      <PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Exp,2.0" />
                      <PositionKeyframe Time="4.0" Value="-275,0,0" />
                    </Keyframes>
                  </Animation>
                </Animations>
              </Graphic>

              <Graphic Name="AnimStar4" Content="file://GreenStar.PNG">
                <Animations>
                  <Animation Loop="-1">
                    <Keyframes>
                      <PositionKeyframe Time="0.0" Value="-275,0,0" Interpolation="Exp,4.0" />
                      <PositionKeyframe Time="2.0" Value=" 275,0,0" Interpolation="Exp,4.0" />
                      <PositionKeyframe Time="4.0" Value="-275,0,0" />
                    </Keyframes>
                  </Animation>
                </Animations>
              </Graphic>

            </Children>
          </Panel>
        </Children>
      </Panel>
    </Content>
  </UI>
</Mcml>

Sample Explorer

  • Animation - Interpolations > all samples

See Also