将 div 元素中的文本与 Raphael SVG 元素一起动画化答案

【问题标题】：Animate text in div element together with Raphael SVG element将 div 元素中的文本与 Raphael SVG 元素一起动画化
【发布时间】：2013-02-22 14:15:32
【问题描述】：

我想获得一个类似按钮的对象，该对象由作为背景的 SVG 矩形和前景中的 HTML 文本组成。 Raphael SVG 库为创建、修改和动画 SVG 元素提供了很好的可能性。

我 found a solution 在 DIV 元素中沿/在 Raphael 对象上绘制 HTML 文本。如何使用 Raphael 的动画方法使文本随背景移动？

我只对基本的 2D 运动感兴趣，没有旋转或变形... 我知道我可以使用 Raphael 支持的 SVG 文本元素，但这不允许我进行文本换行、文本样式 (css)。我试图找到一种在动画过程中获取动画对象坐标的方法，但没有成功。

以下是受上述由 Kelley Reynolds 制作的示例启发的咖啡脚本示例代码。我的问题是如何将背景的移动与覆盖的 div 同步：

nodeBox = (paper, params, attrs) ->
params = params or {}
attrs = attrs or {}
@paper = paper
@x = params.x or 0
@y = params.y or 0
@width = params.width or @paper.width
@height = params.height or @paper.height
@xMargin = params.xMargin or 5
@yMargin = params.yMargin or 5
@rounding = params.rounding or 0
@backgBox = this.paper.rect(@x-@xMargin, @y-@yMargin, @width+2*@xMargin, @height+2*@yMargin, this.rounding).attr(attrs)
containerId = @backgBox.node.parentNode.parentNode.id
containerId = containerId or @backgBox.node.parentNode.parentNode.parentNode.id
@container = jQuery('#' + containerId)

@div = jQuery('<div style="position: absolute; overflow: auto; width: 0; height: 0;"></div>').insertAfter(@container)
jQuery(document).bind('ready', this, (event) ->
    event.data.update()
    )
jQuery(window).bind('resize', this, (event) ->
    event.data.update()
    )
return this

# update function
nodeBox::update = () ->
offset = @container.offset()
@div.css(
    'top': (@y + (@rounding) + (offset.top)) + 'px',
    'left': (@x + (@rounding) + (offset.left)) + 'px',
    'height': (@height - (@rounding*2) + 'px'),
    'width': (@width - (@rounding*2) + 'px')
)

# animate function
nodeBox::animate = (attrs, duration, type) ->
    @backgBox.animate(attrs, duration, type)
    ###
    Animation of the  div ???
    ###

$(document).ready ->
paper = new Raphael document.getElementById('canvas_container'), '100%', '100%'
node1 = new nodeBox(paper, x:200, y:200, width:200, height:60, rounding: 10, xMargin: 8, yMargin: 4, 'showBorder': true).attr(fill: 'lightblue', stroke: '#3b4449', 'stroke-width': 3)
node1.div.html('This is some crazy content that goes inside of that box that will wrap around.')
node1.div.css('font-family': 'Helvetica','font-size': 16, 'text-align': 'justify')

# animate :
node1.animate({x: moveX}, 1000, 'bounce')

【问题讨论】：

请提供代码或jsfiddle示例

标签： javascript animation html text raphael

【解决方案1】：

所以我自己想出了这个。第一种可能是使用 Raphael 2.x 中已经附带的 eve 库。您可以使用 eve.on() 更新与背景框坐标相对应的动画每一帧上 div 的坐标：

nodeBox::animate = (attrs, duration, type) ->

offset = @canvasContainer.offset()
strokeWidth = @backgBox.attrs['stroke-width']
textBox = @div
rounding = @rounding
xMargin = @xMargin
yMargin = @yMargin

### we animate the underlying box
@backgBox.animate(attrs, duration, type, eve.unbind('raphael.anim.frame.' + @backgBox.id, onAnimate))

    ### the coordinates of the div are updated on every frame
eve.on('raphael.anim.frame.' + @backgBox.id, onAnimate = (animationObject) ->
    textBox.css(
        'top': (@attrs.y + (rounding) + (yMargin) + (offset.top) + strokeWidth) + 'px',
        'left': (@attrs.x + (rounding) + (xMargin) +  (offset.left) + strokeWidth) + 'px', # scrollbar width
        'height': (@attrs.height - (rounding*2) - (yMargin*2) - strokeWidth + 'px'),
        'width': (@attrs.width - (rounding*2) - (xMargin*2) - strokeWidth + 'px')
        )
    )

这种解决方案的缺点是，感觉不是很流畅，已经可以看到“跟随”框的文字。因此，我不会尝试带有 Raphael 插件的 GreenSock 动画平台，它应该提供矢量图形和上层 DOM 的同步动画。 Take a look here

【讨论】：