ol-animation-shake

Shake animation for feature

• Demo
• Setup
  • Plugin usage
  • Explicit import
• Usage
• Properties
  • duration
  • revers
  • repeat
  • hiddenStyle
  • fade
  • easing
  • bounce
  • amplitude
  • horizontal

Demo

Setup

Plugin usage

This component is part of the Animations plugin. If not installed globally, you need to import and use the plugin in your main.ts or use the explicit component import (see section below).

Import and use the Animations plugin

import { createApp } from "vue";
import App from "./App.vue";

import { 
  Map,
  Layers,
  Sources,
  Animations
} from 'vue3-openlayers';

const app = createApp(App);
// ...
app.use(Animations); 
// ...

Explicit import

If you don't want to install a plugin, you can import the component explicitly. It's available as a child of the named export Animations.

NOTE

The following documentation refers to the plugin usage. Please make sure to adopt the component names, when you decided to use explicit component imports (e. g. <ol-map> becomes <Map.OlMap> etc.).

Usage

Plugin Usage	Explicit Import
<ol-animation-shake>	<Animations.OlAnimationShake>

ShakeAnimation.vue

<template>
  <ol-map
    :loadTilesWhileAnimating="true"
    :loadTilesWhileInteracting="true"
    style="height: 400px"
  >
    <ol-view
      ref="view"
      :center="center"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-vector-layer
      :updateWhileAnimating="true"
      :updateWhileInteracting="true"
    >
      <ol-source-vector ref="vectorsource">
        <ol-animation-shake :duration="2000" :repeat="5">
          <ol-feature v-for="index in 20" :key="index">
            <ol-geom-point
              :coordinates="arrayWith500Points[index - 1]"
            ></ol-geom-point>

            <ol-style>
              <ol-style-icon :src="starIcon" :scale="0.1"></ol-style-icon>
            </ol-style>
          </ol-feature>
        </ol-animation-shake>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";
import starIcon from "@/assets/star.png";
import { arrayWith500Points } from "./points";

const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(6);
</script>

Properties

duration

• Type: Number
• Default: 1000

duration of the animation in ms, default 1000

revers

• Type: Boolean
• Default: false

revers the animation direction

repeat

• Type: Number
• Default: 0

number of time to repeat the animation, default 0

hiddenStyle

• Type: ol.style.Style

a style to display the feature when playing the animation to be used to make the feature selectable when playing animation , default the feature will be hidden when playing (and not selectable)

fade

• Type: function
• Default: none

an easing function used to fade in the feature, default none

easing

• Type: function
• Default: 0

an easing function for the animation, default ol.easing.linear

bounce

• Type: Number
• Default: 6

number o bounds, default 6

amplitude

• Type: Number
• Default: 40

amplitude of the animation, default 40

horizontal

• Type: Boolean
• Default: false

shake horizontally default false (vertical)