标签: transform

我正在尝试缩小图像,更改图像,然后将其缩小.

CABasicAnimation* shrink = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
shrink.toValue = [NSNumber numberWithDouble:0];
shrink.duration = 1;
    shrink.delegate = self;
    [myImageView.layer addAnimation:shrink forKey:@"shrink"];   

缩小,然后当它完成时,我改变图像,并开始增长:

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag 
{
    myImageView.image = [images objectAtIndex:image];
CABasicAnimation* grow = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
grow.toValue = CGAffineTransformMakeScale(1,1);
    grow.delegate = self;
grow.duration = 1;
[myImageView.layer addAnimation:grow forKey:@"grow"];   
}

这在模拟器上运行得很好,但是在设备上,当收缩完成时,我得到一个全尺寸旧图像的闪光,然后成长动画以新图像开始.

知道如何摆脱闪光灯吗？

(我尝试过"removedOnCompletion = NO;"并尝试将affineTransform设置为在第一次完成后缩小尺寸,但没有太多运气.)

任何提示赞赏.

KB

编辑:

优秀!设置以下内容:

shrink.fillMode = kCAFillModeForwards; 
shrink.removedOnCompletion = NO; 

删除了闪烁.谢谢,本!

我正在尝试使用CSS3属性»旋转«旋转一段简单的文本,精确度为1.5度.

  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  -ms-transform: rotate(1.5deg);
  -o-transform: rotate(1.5deg);
  transform: rotate(1.5deg);

Chrome(v18)的结果看起来不错,在Firefox(v10)和Safari(5.1.5)中,但是我的结果很难看.

我使用的是使用@ font-face实现的字体,但是使用Arial我仍然会遇到问题(至少在Firefox中).见下面的例子.

真正奇怪的是,在Safari中切换到系统字体(Arial)可以解决问题,而在Firefox中问题仍然存在.

任何帮助,解决方法或黑客将不胜感激.

1)Chrome 18/font-family:Calibri/alignment OK

2)Firefox 10/font-family:Calibri/alignment丑陋

3)Firefox 10/font-family:Arial/alignment仍然很难看

4)Safari 5.1.5/font-family:Calibri/alignment丑陋

5)Safari 5.1.5/font-family:Arial/alignment OK

到目前为止,我已经找到了以下线程,但没有一个给出如何解决问题的解释:

https://bugzilla.mozilla.org/show_bug.cgi?id=403447

CSS3错误 - 使用转换时的问题:旋转规则(Safari + Firefox)

CSS变换旋转字母对齐

我也曾尝试设置DirectWrite的变量(改变字体渲染),在本教程中描述:http://www.askvg.com/how-to-enable-direct2d-directwrite-hardware-acceleration-in-mozilla-firefox /,但结果是一样的.

我的问题很简单,但我无法弄清楚它的来源.

我有一个按钮.当我点击它时,它会向左滑动,另一个按钮取代它,并带有CSS动画.
这是我的代码:

.form-anim-right-click {
  position: relative;
  overflow: hidden;
}
.form-anim-right-click > .form-group {
  width: 200%;
}
.form-anim-right-click > .form-group > .btn {
  width: 50%;
  display: inline-block;
  float: left;
  -o-transition: transform 0.3s ease-out;
  -webkit-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.form-anim-right-click > .form-group > .btn:focus {
  -o-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.form-anim-right-click > .form-group > .btn:focus + .form-slide {
  -o-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, …

我试图在图像上执行偏斜,就像这里显示的那样

http://i.msdn.microsoft.com/3b575a03.TransformedClimber%28en-us,VS.90%29.png.

我有一个像素数组代表我的图像,不知道如何处理它们.

我有一个XML文档,我接受了XSLT.结构类似于:

<root>
  <item value="1">
     <object/>
  </item>
  <item value="2" />
     <object/>
  </item>
</root>

我的目标是最终得到一个转换后的XML,类似于:

<root>
 <parent>
  <object-one value-one="1"/>
 </parent>
 <parent>
  <object-two value-two="2"/>
 </parent>
</root>

我的XSLT类似于:

<xsl:apply-templates select="object" />


<xsl:template match="object">
    <xsl:call-template name="1" />
    <xsl:call-template name="2" />
</xsl:template>

<xsl:template name="1" match="object[item/@value = '1'">
  <xsl:element name="object-one" namespace="http://something.org">
    <xsl:attribute name="_Description">
      <xsl:value-of select="@_Type"/>
    </xsl:attribute>
    <xsl:attribute name="_Type">
      <xsl:value-of select="@_Amount"/>
   </xsl:attribute>
  </xsl:element>
</xsl:template>

 <xsl:template name="2" match="object[item/@value = '2'">
  <xsl:element name="object-two" namespace="http://something.org">
    <xsl:attribute name="OriginalAmount">
      <xsl:value-of select="@_Amount"/>
    </xsl:attribute>
  </xsl:element>
</xsl:template>

问题是所有项目节点都应用了相同的模板.如何仅将模板应用于特定节点？

我正在使用Lua API.我正在尝试将3D空间坐标转换为2D空间坐标.我问谷歌但除了使用OpenGL功能的片段之外我找不到任何东西.我不需要源代码或任何简单的方法如何做到这一点？如果有任何帮助,我可以获得相机的视角,要转换的原始位置,窗口大小和宽高比？在此先感谢您的任何建议 :)

一些浏览器(对我来说:XP上的firefox和chrome)似乎没有在CSS旋转的文本上应用抗锯齿

例如:http://dabblet.com/gist/4281185

为什么他们适用于图像但不适用于文字？

我遇到的情况是我在一个元素上有多个变换,所以我的问题是如何在保持命名变换的同时将其转换为Compass:

-webkit-transform:translateY(-100%)scale(0.5);
-moz-transform:translateY(-100%)scale(0.5);
transform:translateY(-100%)scale(0.5);
-ms-transform:translateY(-100%)scale(0.5);

就像是 : @include translateY(-100%) scale(0.5);

谢谢.

我正在使用一个相当简单的CSS过渡来创建一个盒子,通过同时转换两个div 180deg来"翻转".当你在盒子的"背面"时,它应该是略微透明的,这样你就可以看到底面.

除了最新的Safari 7和iOS 7之外,我在所有浏览器中都能很轻松地工作.在Safari 7上,动画闪烁,后卡在动画结束时"弹出"到前面.

这似乎是在较新的Safari上渲染动画的一个错误.是否有一种解决方法可以使其表现更好？

在Chrome和Safari上查看动画的GIF

请参阅http://cssdeck.com/labs/flippable-card上的演示

我有一个已经应用了旋转的矩形.我想获得未旋转的尺寸(x,y,宽度,高度).

以下是元素的尺寸:

Bounds at a 90 rotation: {
 height     30
 width      0
 x          25
 y          10
}

以下是旋转设置为无后的尺寸:

Bounds at rotation 0 {
 height     0
 width      30
 x          10
 y          25
}

在过去,我能够将旋转设置为0,然后读取更新的边界.但是,我使用的其中一个功能有一个错误,所以现在我必须手动完成.

是否有一个简单的公式,使用我已有的信息获得旋转0的界限？

更新:对象围绕对象的中心旋转.

更新:
我需要的是类似下面的功能:

function getRectangleAtRotation(rect, rotation) {
    var rotatedRectangle = {}
    rotatedRectangle.x = Math.rotation(rect.x * rotation);
    rotatedRectangle.y = Math.rotation(rect.y * rotation);
    rotatedRectangle.width = Math.rotation(rect.width * rotation);
    rotatedRectangle.height = Math.rotation(rect.height * rotation);
    return rotatedRectangle;
}

var rectangle = {x: 25, y: 10, height: 30, width: 0 }; …