css怎么创建动画_使用CSS和JavaScript创建动画Google Map标记-CSDN博客

css怎么创建动画

Original image: DeviantArt

原始图像： DeviantArt

The Google Maps API allows web developers to create an excellent user experience with just a few lines of code through their magical, built-in functions.

Google Maps API使Web开发人员可以通过其神奇的内置函数以几行代码创建出色的用户体验。

However, there’s one glaring exception: flexibility and creativity with map markers.

但是，有一个明显的例外：使用地图标记的灵活性和创造力。

Sure, you can add a custom marker image, a tooltip, and a label. But those are all static, text-oriented ways of interacting, which can become overwhelming on a map with many points. There’s no standard way to create interactive markers that respond to the user’s actions.

当然，您可以添加自定义标记图像，工具提示和标签。但是，这些都是静态的，面向文本的交互方式，在具有许多点的地图上可能会变得不知所措。没有标准方法来创建可响应用户操作的交互式标记。

I simply wasn’t satisfied with this, so I set out to find a way to create truly distinctive maps. I’m going to show you how to include CSS3 animations on your map markers so that you can have them dance, wriggle and hide until they pretty much jump out of the screen.

我对此并不满意，所以我着手寻找一种创建真正独特地图的方法。我将向您展示如何在地图标记上包括CSS3动画，以便您可以让它们跳舞，蠕动和隐藏，直到它们几乎跳出屏幕为止。

If the user hovers over a marker, clicks on it or uses a toggle outside the map, you’ll be able to use any CSS animation to bring it to life. This guide will focus on a simple strategy you can use to include animated markers in any of your projects. (For comparison, two other examples — by Ryan Connolly and Felipe Figueroa — use a similar method.)

如果用户将鼠标悬停在某个标记上，单击该标记或在地图外部使用切换开关，则可以使用任何CSS动画将其栩栩如生。本指南将重点介绍一种简单的策略，您可以使用该策略在任何项目中包括动画标记。 (为了进行比较，另两个示例( Ryan Connolly和Felipe Figueroa编写 )使用了类似的方法。)

Here’s a basic example of animated markers at work. The famous Cheshire Cat acts as a marker for three separate points in Massachusetts, and you can use the toggle in the top right to change his animations:

这是工作中的动画标记的基本示例。著名的柴郡猫(Cheshire Cat)充当马萨诸塞州三个独立点的标记，您可以使用右上角的切换按钮更改其动画：

See the Pen CSS Google Map Markers by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen CSS Google Map Markers 。

基础 (The Basics)

There a few steps you’ll need to take to add CSS animation capabilities to your markers.

您需要采取一些步骤将CSS动画功能添加到标记中。

第1步 (Step 1)

Add an image to your markers. This is how you specify your image:

将图像添加到标记。这是您指定图像的方式：

var catIcon = {
    url: myImageURLhere,
    //state your size parameters in terms of pixels
    size: new google.maps.Size(70, 60),
    scaledSize: new google.maps.Size(70, 60),
    origin: new google.maps.Point(0,0)
}

第2步 (Step 2)

Add optimized:false to the marker specification. This allows you to render each marker as a separate DOM element:

在标记规范中添加optimized:false 。这使您可以将每个标记呈现为单独的DOM元素：

var marker = new google.maps.Marker({
    position:latLng,
    map: map,
    // set the icon as catIcon declared above
    icon: catIcon,
    // must use optimized false for CSS
    optimized: false
});

第三步 (Step 3)

Create an overlayView that will organize all your markers in one pane, which you can then access from the DOM:

创建一个overlayView ，它将在一个窗格中组织所有标记，然后您可以从DOM中进行访问：

var myoverlay = new google.maps.OverlayView();
    myoverlay.draw = function () {
        this.getPanes().markerLayer.id='markerLayer';
    };
myoverlay.setMap(map);

You can give your marker layer an id on the getPanes() line so you can use it in CSS. This Overlay view will automatically collect any markers that are not already in another layer. In this case, there are no other layers, so it collects all markers.

您可以在getPanes()行上为标记层指定一个id ，以便可以在CSS中使用它。此叠加视图将自动收集尚未在另一层中的所有标记 。在这种情况下，没有其他层，因此它将收集所有标记。

第4步 (Step 4)

Use CSS to give an animation to all markers in your layer. This can be an animation that happens once, or happens continuously:

使用CSS将动画赋予图层中的所有标记。这可以是一次或连续发生的动画：

#markerLayer img {
  animation: pulse .5s infinite alternate;
  -webkit-animation: pulse .5s infinite alternate;
  transform-origin: center;
  -webkit-transform-origin: center;
}

灵活性选项 (Flexibility Options)

The above steps will let you add an animation to all markers immediately, so here are a few options for greater control over animating your markers.

通过上述步骤，您可以立即将动画添加到所有标记，因此，这里有一些选项可以更好地控制标记的动画。

外部拨动 (External toggle)

Let’s say you want to include a legend or some clickable toggles so that users can show and hide different layers, or have markers with certain features change their CSS animation. That’s easy! Just use a jQuery .click() handler, like this:

假设您要添加图例或一些可单击的切换，以便用户可以显示和隐藏不同的图层，或者使具有某些功能的标记更改其CSS动画。这很简单！只需使用jQuery .click()处理程序，如下所示：

$('.btn').click(function(){
   $('#markerLayer img').css('animation', 'myAnimationOptionsHere');
   $('#markerLayer img').css('-webkit-animation', 'myAnimationOptionsHere')
})

点击/悬停时 (On click/hover)

Want to add a brief animation when users hover over one marker, or click on it? Let the hackiness begin! First, create a global array to store all your markers:

是否想在用户将鼠标悬停在一个标记上或单击它时添加简短的动画？让骇客开始吧！首先，创建一个全局数组来存储所有标记：

var allMarkers=[];

Then, when you declare each marker, add a title attribute and stringify it:

然后，在声明每个标记时，添加一个title属性并将其字符串化：

var marker = new google.maps.Marker({
    position:latLng,
    map: map,
    icon: catIcon,
    optimized: false,
    title: allMarkers.length.toString()
});

Adding a title attribute that is dependent on the length of the array will create unique ids for each marker. Then add the marker to the array:

添加依赖于数组长度的title属性将为每个标记创建唯一的id 。然后将标记添加到数组中：

allMarkers.push(marker);

Finally, here are your click and hover events. You identify each individual marker by using this individual title identifier:

最后，这是您的点击和悬停事件。您可以使用以下单独的标题标识符来识别每个单独的标记：

google.maps.event.addListener(marker, 'click', function() {
  var thisTitle= Number(this.title);
  $('#markerLayer img').eq(thisTitle).css()...
})

google.maps.event.addListener(marker, 'mouseover/mouseout', function() {
  var thisTitle= Number(this.title);
  $('#markerLayer img').eq(thisTitle).css()...
})

不同标记类型的不同动画 (Different animations for different marker types)

Let’s say you add two separate marker types to a map: baseball fields and football fields. Since both are automatically included in your overlay layer, you need a way to apply separate animations to each of them. That’s easy! Just use the src attribute in your CSS and match it with the image URL of the respective markers:

假设您在地图上添加了两种单独的标记类型：棒球场和足球场。由于两者都自动包含在叠加层中，因此您需要一种将单独的动画应用于每个动画的方法。这很简单！只需在CSS中使用src属性，然后将其与相应标记的图片网址进行匹配即可：

#markerLayer img[src='/img/myURLpath'] {
    animation: pulse .5s infinite alternate;
    -webkit-animation: pulse .5s infinite alternate;
    transform-origin: center;
    -webkit-transform-origin: center;
}

最后的想法 (Final Thoughts)

Your main job as a developer or a designer is to build a product that your users love. They’ve seen plenty of Google Maps in the products that they already use. This is your opportunity to blow their expectations away!

作为开发人员或设计师的主要工作是构建用户喜欢的产品。他们已经在使用的产品中看到了大量的Google Maps。这是您抛弃他们期望的机会！

Here are a couple ways map marker animations can create delight for your users:

地图标记动画可以通过以下几种方式为用户带来愉悦感：

If you have marker images that resemble actual things that move (like cats!), give them a CSS animation that corresponds to a natural movement.
如果您的标记图像类似于实际移动的物体(例如猫！)，请给它们提供与自然移动相对应CSS动画。
If you have map marker images that don’t traditionally move (like a store), apply an animation that makes it seem like the images are happy you clicked them, like a jump or a shudder.
如果您有传统上不会移动的地图标记图像(例如商店)，请应用动画，使其看起来像单击图像一样高兴，例如跳跃或颤抖。
If you have data that corresponds to each marker, make the marker react based on the data. Let’s say you’re labeling intersections that are heavily trafficked: you can put a flashing exclamation point over those areas.
如果您具有与每个标记相对应的数据，请使标记根据数据做出React。假设您要标记交通繁忙的交叉路口：您可以在这些区域设置一个闪烁的感叹号。

Try it out, and wait for the user compliments to roll in!

尝试一下，然后等待用户赞美！

Did this guide help you? Let me know in the comments!

本指南对您有帮助吗？在评论中让我知道！